Bootstrap 4 Twitter: only displaying one menu on larger screens with two toggler bars

Currently utilizing Twitter Boostrap 4 with a navbar featuring two menus :

  • One menu designated for general navigation

  • The other menu designated for account information

When viewing on small devices, both toggles are visible as expected https://i.sstatic.net/CiLbN.png

However, when viewing on larger devices, I would like to display only the general navigation and hide the account navigation. The issue lies in the fact that the account navigation is still showing and I am unsure how to hide it on larger devices? https://i.sstatic.net/R0igD.png

<!-- logo -->
<a class="navbar-brand" href="#" class="d-inline-block align-top"> 
    <img src="https://www.n9ws.com/images/upload/google-220118055200.png" />
</a>
<span class="d-none d-sm-inline" style="font-size:17px;text-shadow: 0.15em 0.15em #333;display:inline;color:white"><strong>Collaborative Calendar</strong> of <strong>Aikido courses</strong> in <strong>France</strong></span>

<!-- global menu toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- account toggle -->
<button class="navbar-toggler" style="padding: 0.55rem 0.70rem;" type="button" data-toggle="collapse" data-target="#navbarMonCompte" aria-controls="navbarMonCompte" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fa fa-user"></i>
</button>


<!-- account section -->
<div class="collapse navbar-collapse justify-content-end"  id="navbarMonCompte">
    <ul class="navbar-nav float-right text-right">
        <li class="nav-item ">
            <a class="nav-link" href="#">Change email</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" href="#">Change password</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" href="#">Disconnect</a>
        </li>
    </ul>
</div>


<!-- global menu section -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
        <li class="nav-item ">
            <a class="nav-link <?php echo ($this->menuSelected == 'homepage') ? 'active' : '';?>" href="/index2/index/">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php echo ($this->menuSelected == 'calendar') ? 'active' : '';?>" href="/calendar2/calendar/">Calendar</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Teachers</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Videos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Reports</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                About Us
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Change email</a>
                <a class="dropdown-item" href="#">Change password</a>
                <a class="dropdown-item" href="#">Disconnect</a>
            </div>
        </li>            
    </ul>

    <div class="form-inline my-2 my-lg-0">
        <button type="button" class="btn btn-sm my-2 my-sm-0 btn-primary" data-toggle="modal" data-target="#my-modal-login">
            Login
        </button>
    </div>

</div>

If you have any suggestions or solutions, please provide them. Thank you. Eric

cssnavigationbootstrap-4navbar

Answer №1

Hide a specific navbar on larger devices by targeting its id and applying a style of display:none, for example with a media query of min-width: 992px.

For instance, if you want to hide navbarMonCompte, the CSS code would look like this:

@media only screen and (min-width: 992px) {
    #navbarMonCompte {
       display: none !important;
    }
}

EDIT - To address a new question raised in comments

When clicking on the 'account toggler' then the 'global menu toggler' on small devices, both dropdowns appear. Is there a way to hide one dropdown when the other is shown?

$('button[data-target=my-modal-connexion]').click(function() {
    if($('#navbarSupportedContent').hasClass('show'))
        $('#navbarSupportedContent').removeClass('show');
});

The jQuery snippet above will check if the navbar is open when the account toggler is clicked and close it if it is already open.

Answer №2

If you want to hide the account button, simply add a hide-account class to it and include this snippet in your CSS:

@media only screen and (min-width: 992px) {
.hide-account {
    display: none;
}}

You can see an example of how this works on jsfiddle here: https://jsfiddle.net/sfto2qhw/1/

Answer №3

Ensure to include d-block d-md-none in your account Toggler button, alternatively you can utilize d-sm-none or d-lg-none depending on your breakpoint requirements.

<!-- logo -->
<a class="navbar-brand" href="#" class="d-inline-block align-top"> 
    <img src="https://www.n9ws.com/images/upload/google-220118055200.png" />
</a>
<span class="d-none d-sm-inline" style="font-size:17px;text-shadow: 0.15em 0.15em #333;display:inline;color:white"><strong>Collaborative</strong> calendar of <strong>Aikido stages</strong> in <strong>France</strong></span>

<!-- global menu toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- account toggle -->
<button class="navbar-toggler d-block d-md-none" style="padding: 0.55rem 0.70rem;" type="button" data-toggle="collapse" data-target="#navbarMonCompte" aria-controls="navbarMonCompte" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fa fa-user"></i>
</button>


<!-- account -->
<div class="collapse navbar-collapse justify-content-end"  id="navbarMonCompte">
    <ul class="navbar-nav float-right text-right">
        <li class="nav-item ">
            <a class="nav-link" href="#">Change email</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" href="#">Change password</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" href="#">Disconnect</a>
        </li>
    </ul>
</div>


<!-- global menu  -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
        <li class="nav-item ">
            <a class="nav-link <?php echo ($this->menuSelected == 'home') ? 'active' : '';?>" href="/index2/index/">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php echo ($this->menuSelected == 'calendar') ? 'active' : '';?>" href="/calendar2/calendar/">Calendar</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Teachers</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Videos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Reports</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                About
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Change email</a>
                <a class="dropdown-item" href="#">Change password</a>
                <a class="dropdown-item" href="#">Disconnect</a>
            </div>
        </li>            
    </ul>

    <div class="form-inline my-2 my-lg-0">
        <button type="button" class="btn btn-sm my-2 my-sm-0 btn-primary" data-toggle="modal" data-target="#my-modal-login">
            Login
        </button>
    </div>

</div>

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

Having numerous calls to isNaN within a JavaScript if-else statement

I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create th ...

javascriptjquerycssif-statement

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

cssangularprimeng

Issue with scrolling in angular-ui-bootstrap modal on Apple devices with the mobile web app capability enabled

I've encountered a problem with a basic to-do list web application that I'm currently developing. In order to enable the iPhone standalone launch feature, I have included the following code: <meta name="apple-mobile-web-app-capable" content=" ...

cssangularjstwitter-bootstrap-3angular-ui-bootstrapiphone-standalone-web-app

Setting "minimum" margins in the @page CSS can be accomplished by adjusting the margin properties to ensure that

I have been exploring different methods to set margins in print-settings and discovered that one effective way is to utilize @page (or specify it directly in @media print) within scss. Setting the @page-rule for margin has yielded positive results, especia ...

htmlcssgoogle-chromeprinting

Purge the Firefox font cache

Please note: This is a unique inquiry and not a duplicate of How to reset css fonts cache. Please refer to the bottom of my question for more details. TL;DR I am seeking a reliable method to clear the font cache in Firefox, as standard methods like CTRL+ ...

cssfirefoxfonts

Stop text from wrapping around the amazing fonts image

I am facing an issue with displaying an image using awesomefont character with text next to it. The problem is that I want the text to be right-justified beside the image instead of appearing below it. Despite trying different alignment codes and container ...

htmlcssasp.net

Adjusting the vertical alignment of wrapped divs with jQuery toggle

I am currently working on a project where I have a set of dynamically generated divs, each containing rows of content with three columns. Using jQuery toggle, I am trying to show and hide certain elements within the divs without affecting their layout. Her ...

jqueryhtmlcsstoggle

Error: Compilation was unsuccessful due to module not found. Unable to resolve in ReactJS

As I was wrapping up this task, an unexpected error popped up: Module not found: Can't resolve './components/Post' in ./src/pages/index.js I've tried everything to troubleshoot it but no luck. Here's a rundown of my code snippets ...

javascripthtmlcssreactjsreference

Is there a way to move a list item element to the right within a navigation tabs bar using Bootstrap 5?

I've been scouring the internet for tips on how to move my "User information" and "Logout" li elements to the right of my navbar using bootstrap, but I can't seem to find a solution. As a beginner with bootstrap, this task has proven to be quite ...

cssbootstrap-5

In PHP, the use of ul, li, class, and

I have searched high and low, but unfortunately the answers provided by others did not alleviate my problem. Instead, they caused even more confusion. I am currently working on a small project for my website and attempting to convert it to PHP in order to ...

phphtmlcsshtml-lists

Utilizing HTML/CSS to display text and an image positioned above a sleek navigation bar

I am struggling to align a logo on the left side of my website, with text on the right next to it, all placed above the navigation bar. Despite my efforts, I just can't seem to get them positioned correctly! CSS .headerLogo{ float:left; marg ...

csshtmlcss-positionpositioning

JQuery's animations and their influence on element positioning

My thumbnail animation increases in size on hover, but it is affecting the position of the other images. The issue is that when hovering over an image, the others move down and to the right to make space for the animated one. I want the other images to st ...

javascriptjquerycssanimation

Is there still excess top padding or margin in Firefox after clearing the default reset for the <ul> element?

My floated horizontal list is looking great on IE and Opera, but for some reason, Firefox is adding extra padding or margin at the top. I'm not sure how to fix it. Everything was fine until I had to add a display:inline to an image link next to it to ...

csshtml-listscss-float

Flexbox element in React not resizing to fit width

I've been working on a slide carousel and it's almost complete, but I'm facing an issue with adjusting the arrows to the images. When testing the website for responsiveness, I noticed that the div inside the flexbox stops shrinking and rema ...

javascripthtmlcssreactjs

Dim the color of a date on the Sharepoint calendar

Trying to gray out specific days in a SharePoint calendar using the script editor. Looking to target individual days like Christmas day. Came across an article that uses code to gray out weekends, but I need something more precise... Not sure if this code ...

htmlcsssharepointcalendarsharepoint-designer

Remove 'File' option from the Menu in Tiny MCE

Is there a way to selectively remove the "File" option from the Menu Bar without specifying each individual menu item? https://i.sstatic.net/SFgvi.png I attempted the following method: menu: { edit: {title: 'Edit', items: 'undo redo | cut ...

jquerycsstinymcerich-text-editor

Calculating the total of selected values in Checkboxes and Selectors using KnockoutJS

I have already created this using jQuery. You can view it on JSFiddle: JSFiddle HTML: <div class="container"> <header> <h3>The Crazy Things We'll Do for Money</h3> <div class="small"><em>An ele ...

javascriptjqueryhtmlcssknockout.js

Failure to load CSS and JavaScript files

I recently deployed my Symfony 4 application, but I'm encountering an issue where the app is not loading images, routes, CSS files, and JS files. I have already installed assets. Here is what I am seeing: Failed to load resource: the server responded ...

symfonybootstrap-4twigsymfony4

Enhance Your Website with Bootstrap 4 Card Image Zoom

Is it possible to add an image zoom effect to Bootstrap 4 cards? I found some inspiration at . Below are the codes I have used: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha ...

javascriptjquerycssbootstrap-4twitter-bootstrap-4

Is there a way to adjust the text color of a label for a disabled input HTML element?

If the custom-switch is active: the label text color will be green. If the custom-switch is inactive: the label text color will be red. A JavaScript (JQuery) method call can be used to activate one button while deactivating another. The Issue It appe ...

javascripthtmljquerycss