CODEWITHSUNDEEP
csstwitter-bootstrap
Kristoffer Rom
Kristoffer Rom

Reputation: 115

bootstrap full screen menu on all devices

I'm using navbar-fixed-top and I'd like my menu items to appear in full width below the navbar upon hitting the burger-icon.

The menu should go all the way to the bottom of the screen. And the burger-icon should change to an X-icon when the menu is open.

This behaviour should happen no matter what device the visitor is using.

Here's my dev site and here's a mockup:

mockup

As you see I've achieved the full width menu items but I'm unsure as to how to do the following:

Any ideas?

Upvotes: 1

Views: 18853

Answers (2)

Joe Berry
Joe Berry

Reputation: 26

Vedran Jaic's answer is partially correct (thank you!) but it took me just a little more to get it to work correctly as well as animate smoothly. Fist I had to add an empty absolute position div ('#navbar-expander') with 100vh inside the nav that would help set the height of the navbar during transition, otherwise it uses the height of the relative positioned elements(the buttons) inside the nav, which causes a stutter in the animation. There might be better way to set that height but this is what worked for me and Im gonna roll with it...

<div id='navbar' class="collapse navbar-collapse">
    <div class='navbar-expander'></div>
    <ul class="nav navbar-nav navbar-left">
            {{# each navLinks}}
            <li {{#ifeq ../section key}}class="active"{{else}}{{/ifeq}}>
                <a href="{{ href }}">{{ label }}</a>
            </li>
        {{/each}}
    </ul>
</div>

Then set the classes including the bootstrap transitions that are added/removed as needed (the below shows the fullscreen nav only on extra small device but you could remove the media query to use in all devices):

.navbar-expander{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height:100vh;
    display:none;
}


@media screen and (max-width: $screen-sm-min) {

    .navbar-collapse, 
    .navbar-collapse.collapse,
    .navbar-collapse.in, 
    .navbar-collapse.collapsing{
        max-height: 100vh;  
    }
    .navbar-collapse.in{
        height: 100vh;
    }   

    .navbar-expander{
        display:block;
    }
}

As for changing the icon, the snippets in this link worked pretty slick for me so I thought I would share: https://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/#comment-2052292201

Upvotes: 0

Vedran Jaic
Vedran Jaic

Reputation: 136

First you need to remove all the fixed max-heights for the .navbar-collapse, you have set it to 340px, and then set the height on the navigation to 100vh

.navbar-collapse {
    height: 100vh;
}

This will set the height of the navbar to entire viewport height.

Second, for the button try using a font icon (ie. fontawesome) and target the button state class of .collapsed to add a different icon.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
    <i class="icon fa fa-bars"></i>
</button>

And then replace the bars icon with the X to close

.navbar-toggle.collapsed .icon:before {
    content: '\f00d';
}

If you want to stay with default bootstrap bars, and animate them into an X, you can take a look at this fiddle https://jsfiddle.net/gndkmc5y/

All you have to do is to set the top, middle and bottom classes to the bars.

Upvotes: 6

Related Questions