I have a bootstrap 4 nav I’m having issues with. It’s kinda complicated because I’m changing the order of the the nav items (logo, nav links, and call to action button) on smaller screen sizes which is likely causing my problem. The problem is below 768 pixels when the hamburger icon shows . When you expand the nav it’s pushing the logo and call to action button below the nav. I want just the nav links to show on the expanded menu.
Also wondering with bootstrap 4 if the slide out animation can easily be changed to come out from the left side rather than the top.
link to dev site: http://poke.devlocation.site
<header class="navigation-wrap bg-light start-header start-style fixed-top">
<div class="nav-container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand order-2 order-md-1" href="<?php echo get_site_url(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/poke-bros-logo.png" height="100" alt="">
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse order-1 order-md-2" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto py-4 py-md-0">
<li class="nav-item">
<a class="nav-link" href="<?php echo get_site_url(); ?>/menu/">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo get_site_url(); ?>/locations/">LOCATIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo get_site_url(); ?>/about-us/">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo get_site_url(); ?>/news/">NEWS</a>
</li>
</ul>
<ul class="navbar-nav ml-auto py-4 py-md-0 hide-on-mobile">
<li class="nav-item nav-order-online ">
<a class="nav-link chownow-order-online " href="https://ordering.chownow.com/order/10830/locations/?>" >ORDER<br>ONLINE</a>
</li>
</ul>
</div><!-- collapse navbar-collapse -->
<div class="nav-order-online d-block d-md-none order-3">
<!-- <a class="nav-link" href="#">ORDER<br>ONLINE</a> -->
<a class="nav-link chownow-order-online" href="https://ordering.chownow.com/order/10830/locations/?>" >ORDER<br>ONLINE</a>
</div><!-- nav-order-online -->
</nav><!-- close collapse navbar-collapse -->
</div><!-- close col -->
</div><!-- close row -->
</div><!-- close container -->
</header>
PaulOB
August 26, 2020, 5:54pm
2
aaron4osu:
bootstrap
Hi,
It looks like you can do all that (apart from the sideways slide) by setting the correct order classes on the elements and using the correct hiding class (bootstrap4 doesn’t use hidden-xs etc. It uses things like d-block d-md-none).
I just copied this from the web inspector so you will have to ignore the dynamic classes and just concentrate on the order classes I added.
<header class="navigation-wrap bg-light start-header start-style fixed-top">
<div class="nav-container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand order-2 order-md-1" href="http://poke.devlocation.site">
<img height="100" alt="" data-src="http://poke.devlocation.site/wp-content/themes/poke-signal-theme/assets/img/poke-bros-logo.png" class=" lazyloaded" src="http://poke.devlocation.site/wp-content/themes/poke-signal-theme/assets/img/poke-bros-logo.png"><noscript><img src="http://poke.devlocation.site/wp-content/themes/poke-signal-theme/assets/img/poke-bros-logo.png" height="100" alt=""></noscript>
</a>
<button class="navbar-toggler order-sm-1" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse order-3 collapse show" id="navbarSupportedContent" style="">
<ul class="navbar-nav ml-auto py-4 py-md-0">
<li class="nav-item">
<a class="nav-link" href="http://poke.devlocation.site/menu/">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://poke.devlocation.site/locations/">LOCATIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://poke.devlocation.site/about-us/">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://poke.devlocation.site/news/">NEWS</a>
</li>
</ul>
<ul class="navbar-nav ml-auto py-4 py-md-0 d-none d-md-block">
<li class="nav-item nav-order-online">
<a class="nav-link chownow-order-online">ORDER<br>ONLINE</a>
</li>
</ul>
</div><!-- collapse navbar-collapse -->
<div class="nav-order-online d-block d-md-none order-2 order-md-3">
<!-- <a class="nav-link" href="#">ORDER<br>ONLINE</a> -->
<a class="nav-link chownow-order-online">ORDER<br>ONLINE</a>
</div><!-- nav-order-online -->
</nav><!-- close collapse navbar-collapse -->
</div><!-- close col -->
</div><!-- close row -->
</div><!-- close container -->
</header>
The code above will produce this display:
The changes I made were in these lines:
<a class="navbar-brand order-2 order-md-1" href="http://poke.devlocation.site">
...
<button class="navbar-toggler order-sm-1" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
...
<div class="navbar-collapse order-3 collapse show" id="navbarSupportedContent" style="">
...
<ul class="navbar-nav ml-auto py-4 py-md-0 d-none d-md-block">
...
<div class="nav-order-online d-block d-md-none order-2 order-md-3">
1 Like
PaulOB
August 26, 2020, 6:12pm
3
It’s a bit awkward to slide the menu in from the left as there are some dynamic actions applied to that menu by bootstrap bvut you could try something along these lines.
@media screen and (max-width:767px) {
.navbar-collapse.collapsing {
transition: height 0s ease;
}
.navbar-collapse {
transform: translateX(-100%);
transition: .5s ease;
)
}
.navbar-collapse.show {
transform: translateX(0%);
}
}
It will need some playing around with to get perfect
thanks Again Paul!!! the slide out worded as well!
1 Like
system
November 26, 2020, 5:35pm
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
