Can JavaScript and Bootstrap be used to create a responsive menu?

In order to gain experience with Laravel, js/jquery, and bootstrap, I am working on my own project. The structure of the site/layout I am using for all views is as follows:

| Home  |----- content -----| FRIENDS |
| Blog  |----- content -----|  George |
| Forum |----- content -----|  Pablo  |
| About |----- content -----|  Boris  |
--------------------------------------
| -------------- footer ------------- |

There are 3 columns - the first contains the menu for navigation, the second displays the current Laravel view, and the third shows the logged-in user's friends. The friends data is passed to every view through ViewServiceProvider.

For mobile display, I want the following structure:

|------header with icons ------|
|---------- content -----------|
|---------- content -----------|
|---------- content -----------|
| ---------- footer ---------- |

The header is now horizontal and includes icons for home, friends, notifications, and chats.

I have some questions regarding how to implement this design:

  1. How can I change the navigation column to display icons instead of anchor words? Should I use JavaScript to detect the window width and manipulate the DOM, or should I utilize Bootstrap's display properties?

  2. In the header navigation, when clicking on the "friends" icon, I want to display all friends on the phone screen. Since the friends data is already passed to every view, should I create a separate view for friends, or should I hide/display columns based on screen size using Bootstrap?

javascriptlaravelbootstrap-4responsive-designresponsive

Answer №1

*Custom Navigation Bar*

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">My Site</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Portfolio</a>
            </li>
             <li class="nav-item">
              <a class="nav-link" href="#">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


*Main Content Area*
 
   <div class="row">
         <div class = "col-md-12">
            *Your unique content here*
         </div>
   </div>


*Page Footer*

<footer>
    <p>Copyright 2021 My Site</p
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

Discover the intricacies of setting up nested GitHub packages within the NPM ecosystem

I have a NPM package repository hosted on GitHub that contains nested packages (which are referenced through file: URLs). When I download it, for example, when I declare a dependency on this GitHub repository named com.qux.nodejs via https://github.com/qu ...

javascriptnode.jsnpm

Display personalized content over images utilizing the jQuery galleria plugin

Hey there, I've been successfully using the jquery galleria plugin, but now I'm looking to add some custom content and links that will display in the center of the image. Is it possible to achieve this with galleria? Your insights would be greatl ...

javascriptjquerygalleria

Error occurred while trying to fetch the Backbone.js collection due to undefined value of 'this._byId'

I am currently working with coffeescript and my code is quite straightforward: class SomeCollection extends Backbone.Collection constructor: (@options) -> url: -> "#{$SCRIPT_ROOT}/some/data/#{@options.someId}" model: SomeModel class SomeV ...

javascriptbackbone.jscollectionscoffeescriptfetch

Searching in Ruby on Rails using OR logic

Hello there! Currently, I am utilizing AngularJS alongside Ruby on Rails for the backend. I am curious about how to utilize the find method to search for an object array using one of two specific words. console.log(_($scope.reasonOfRejection).find({nam ...

javascriptruby-on-railsangularjsruby

Disable form input fields while keeping all other elements enabled

Currently, I am facing a dilemma where I must deactivate specific input fields within a form. Given that there are numerous fields to consider, individually disabling each one seems impractical. Can anyone offer advice on how to disable a set of elements ...

javascripthtmlcssreactjs

What is the best way to transform a JSON array in text format into a JSON object array using NodeJS or JavaScript?

I have a RESTful API built with Node.JS and ExpressJS. I want to retrieve a JSON array from the FrontEnd and pass it into my API. api.post('/save_pg13_app_list', function (req, res) { var app_list = { list_object: req.body.li ...

javascriptarraysnode.jsjson

Integration of elFinder with TinyMCE 4

Has anyone attempted to integrate elFinder into the latest version (4b1) of TinyMCE? The previous implementation seems to be not working. If you have any snippets or tips, please share. Thank you very much. ...

javascriptjquerytinymceelfinder

Executing an http.get request in Angular2 without using RxJS

Is there a method to retrieve data in Angular 2 without using Observable and Response dependencies within the service? I believe it's unnecessary for just one straightforward request. ...

javascripthttpangular

Issue with footer display while utilizing Bootstrap's cover template

When I utilize the Bootstrap cover template, I encounter an issue where if I resize the window to a smaller level or include enough text to require scrolling, the footer background color turns into a solid color. This is also visible in the template I am u ...

htmlcsswebbootstrap-4

Patience for AJAX call to complete in React and Redux

Is it necessary to display data only after the AJAX call has been completed? Check out my Reducer: import { INCOME_PROFILE } from '../actionTypes' import Immutable from 'immutable' const initialUserState = []; const profileReducer = ...

javascriptjqueryajaxreactjsredux

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...

javascripthtmlcss

Incorporating corporate registration functionality into a Laravel SaaS application

Transitioning from codeigniter to laravel, I am still fairly new, so please pardon me if this is too simple. I'm facing an issue that seems straightforward but can't find any relevant information online, although I found some packages that are cl ...

phpmysqllaravellaravel-5

Loop through an array using a Meteor template

js if (Meteor.isClient) { Template.body.helpers({ fixtures: function () { Meteor.call("checkTwitter", function(error, results) { return results.data.fixtures; }); } }); } if (Meteor.isServer) { Meteor.startup(function ...

javascriptmeteormeteor-helper

Sending Data to Server from iOS Device (AJAX, HTTPS)

I've encountered an issue where I am unable to make an AJAX POST Request from my iOS (Cordova) App. The API URL has a secure certificate on www.myDomain.ch but not without the www prefix. Interestingly, when I tested the Request with a tool or in a Re ...

javascriptiosajaxpost

Develop a personalized function to enhance the standard jQuery $.ajax functionality

I am in need of developing a function that enhances jQuery's $.ajax callbacks. Specifically, I want to include default code in every beforeSend() and complete() callback. Here is an attempt I made: var custom = {}; var tempAjax = function(options,cal ...

javascriptjqueryajax

Having trouble with the date format in the highCharts range selector?

I am encountering an issue while trying to implement the rangefilter feature with HighCharts. The start and end dates are appearing incorrect, indicating that my date is not being recognized properly. My x-axis consists of unique dates as categorical valu ...

javascriptjqueryhighcharts

Finding numerous keywords in a given text (Javascript)

Here is the code snippet I'm working with: // Finding multiple keywords within a text // Scenario 1 var inputText = "Hello, My name is @Steve, I love @Bill, happy new year!"; var terms = ["steve"]; var result = inputText.toLowerCase().search([terms]) ...

javascriptarraysmatchmatchingkeyword-search

Use ajax request to serialize input into HTML value

I implemented a jquery.ajax post request to send data to the server using C#, however, I encountered an error with my code. Here is the code snippet: $(function(){ $('#frmSubmit').on('submit', function(e){ e.preventDefault(); ...

javascriptc#jqueryhtmlajax

The concept of recursion in AngularJS directives

I developed a unique custom directive. angular.module('menu',[]) .directive('MenuDirective',function(){ return{ restrict:'E', replace:'true', scope:{ m ...

javascripthtmlangularjs