Bootstrap/Wordpress menu bugs [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm having weird problems with my mobile drop down menu. When you click the toggle button the menu appears briefly scrolling just below the button then moves to its proper location.
It also doesn't always run, sometimes clicking it has no effect.
You can see it in action by looking at the mobile version of this page (its the menu activated by the hamburger icon in the top right hand corner):
http://u1f8aki.nixweb23.dandomain.dk
And here is the code that creates the menu:
<div class="mobilenav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="primary-menu"><?php esc_html_e( '', 'mentordanmark' ); ?>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div id="navbar" class="navbar-collapse collapse">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu-nav',
'container_class' => 'mobileDropdownmenu',
'menu_id' => ' ',
) );
?>
</div>
<div id="blivMentorMenu" class="BlivMentor-Login-Menu" style="display: none">
<?php wp_nav_menu(
'menu=secondary-menu&after=<li class="menu-divider">|</li>'
); ?>
</div>
and the CSS:
/* To get the menu to appear */
button.navbar-toggle.collapsed {
display: flex;
flex-direction: column;
}
button.navbar-toggle {
display: flex;
flex-direction: column;
margin-left: 2em;
}
.mobilenav {
display: flex;
align-items: center;
justify-content: space-between;
height: 5.7em;
width: 100%;
}
#primary-menu-nav {
width: 100%;
position: absolute;
left: 0;
top: 5.7em;
border-bottom: 1px solid #e0e4ea;
padding-top: 4em;
}
#primary-menu-nav a {
margin: 0;
padding: 1em;
min-width: 15em;
text-align: center;
}
button.menu-toggle {
border: 0;
font-size: 20px;
width: 1em;
height: 1em;
position: absolute;
top: 1.4em;
overflow: hidden !important;
}
button.menu-toggle:active, button.menu-toggle:focus, a.btn-navbar:active, a.btn-navbar:focus {
border: 0 !important;
outline: 0;
}
a.btn-navbar {
display: flex;
position: absolute;
top: 2.5em;
height: 3em;
width: 3em;
padding: .3em 0;
flex-direction: column;
}
span.icon-bar {
background: #000;
height: .3em;
width: 100%;
margin: .2em;
}

You need to use Bootstrap 4 code if you want to use Bootstrap 4 css.
Bootstrap 3 code is incompatible with Bootstrap 4 css.
Here's what a basic Bootstrap 4 navbar looks like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

Related

When i change the shape of navbar, the edges are cut

I don't know why, when I declare a border shape different from square the edges are cut:
Here's the html template:
<template>
<div class="navbar-container rounded-pill">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="#">111</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">222</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">333</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">444</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
and heres the css:
<style scoped>
#import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.navbar-container {
box-sizing: border-box;
margin: 0.5rem;
height: 100%;
width:60%;
border: 2px solid red;
margin-left: 20%;
background-color: transparent;
}
nav {
background-color: white !important;
font-size: 1.3rem !important;
}
nav ul li a {
padding-inline: 1rem !important;
}
</style>
I want a pill-rounded shape of the navbar, when the shape is square, everthing works fine, i just want to change and i couldnt though bootstrap classes and css border radius
Try to also set rounded-pill on navbar class, or you can set the same border-radius to navbar-container and navbar classes without rounded-pill:
new Vue({
el: '#demo',
})
.navbar-container {
box-sizing: border-box;
margin: 0.5rem;
height: 100%;
width: 60%;
border: 2px solid red;
margin-left: 20%;
background-color: transparent;
border-radius: 1em;
}
.navbar {
border-radius: 1em;
}
nav {
background-color: white !important;
font-size: 1.3rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="demo">
<div class="navbar-container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="#">111</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">222</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">333</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">444</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>

make a navbar with a dropdown that instead of showing the link vertical, show them horizontal

Hi everyone i'm trying to replicate this style of navbar https://unionbindingcompany.com/ to practice my skills in css, i tried adding some bootstrap but i ended up in a mess of presents and blah, blah, blah.
so how can i make something like that? sorry if its a lot to explain or maybe is simple, but i can make it just giving it a modify to the bootstrap navbar?
i tried giving it a diferent flex to the container of the dropdown bar but don't show any good results.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
/* img {
width: 100%;
height: 100%;
} */
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* nav bar and header stuff */
.nav-bar-container {
display: flex;
justify-content: space-between;
}
#union-logo-container {
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
border-right-width: 0px;
padding-right: 0px;
width: 10%;
}
.union-logo-nav {
width: 100%;
height: 100%;
}
.#navbarDropdownMenuLink {
display: flex;
flex-direction: row;
}
<div class="nav-bar-container">
<nav class="navbar navbar-light" id="union-logo-container">
<a class="navbar-brand" href="#">
<img
src="/union project/img/logo navbar.jpg"
width="30"
height="30"
alt=""
loading="lazy"
class="union-logo-nav"
/>
</a>
</nav>
<nav class="navbar navbar-expand-lg navbar-light">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown link
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
just use the css transform with rotate. be sure to set width
a{
transform: rotate(90deg);
display:block;
width:1em;
}
<a href='#'>Action</a>

how to make overlay navigation bar in bootstrap

i'm just learning about front end. i have a problem to make an overlay navigation bar instead of dropdown menu when it reach extra small page. so this is what i've done:
function openNav() {
document.getElementById("navbarSupportedContent").style.height = "100%";
}
function closeNav() {
document.getElementById("navbarSupportedContent").style.height = "0%";
}
#navbarSupportedContent {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#navbarSupportedContent a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
when i try to hit the button when it reach extra small, the overlay goes down but it doesn't reach a hundred percent page and it suddenly goes up again. does anyone can help me ?
thanks in advance !
This is happening because you are mixing up Bootstrap core functions and your customs.
Simply remove the Collapse classes of Bootstrap, since you already write your javascript code to achieve what you need.
Add this line of CSS:
#media (min-width: 992px) {
.navbar-expand-lg .navbar-toggler {
display: block;
}
}
Since Bootstrap 4 Media Queries will hide an element matching that class for a screen bigger than 992px.
And then remove all the collapse-related class from your HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
Here's a live working pen: https://codepen.io/alezuc/pen/dyYGobJ
Hope this helps!

show/hide buttons on resizable navbar

I have a nivagation bar with button links in row on resize the window to smaller width each button wrap underneath which changing the navigation height, gets removed from the nav and appended into a dropdown menu.
I managed to append wrapped buttons when the navigation height is higher than 80, but it will only work if the initial size of the screen is big which will have all buttons in one row. but if the screen started at a smaller width it won't append all wrapped buttons in the menu.
Here is my attempt
$(window).resize(function() {
var navbar = $("#navbar");
var list = $("#list");
var btns = $("#btns");
var last_element;
for (var i = 0; i < list.children().length; i++) {
setTimeout(function() {
if (list.height() > 80) {
last_element = list.children().last();
setTimeout(function() {
$("#btns .dropdown-menu").prepend(last_element);
}, 300);
last_element.remove();
}
}, 500);
}
});
#navbar {
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
}
#list {
margin: 0;
padding: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.item {
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
/* display: inline-block; */
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
}
.dropdown-menu {
width: 200px;
padding: 0 20px;
}
<!-- bootstrap style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<ul id="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
<li class="item">item 5</li>
<li class="item">item 6</li>
<li class="item">item 7</li>
</ul>
<div id="btns">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I would love to have similar action to this image,
Can someone offer a snippet suggestion or what should I use to implement such action?
Updated - move hidden items to dropdown menu
First, make changes on css:
apply display: flex to #navbar.
calculate the maximum height of #list manually and set max-height & overflow: hidden property to it. In this case, the maximum height of #list would be 73px but not 80px. (the height of .item 65px + top margin of .item 4px + bottom margin of .item 4px = 73px) If the max-height is not correct, #list may not hide the .items properly.
set display: inline-block for .items.
`
#navbar{
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
/*Flex layout*/
display:flex;
flex-direction:row;
align-items:center;
}
#list{
margin: 0;
padding: 0;
/*Calculate the max-height and set overflow hidden*/
overflow:hidden;
max-height:73px;
}
.item{
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
display: inline-block;
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
/*Move text-align center to here*/
text-align: center;
/*Remove flex layout & add display inline-block*/
display: inline-block;
}
.dropdown-menu{
width: 200px;
padding: 0 20px;
}
`
Then, update the $(window).resize() function.
The below code will check if the item is being moved to a hidden area. Moreover, use .html() to refresh the dropdown menu.
let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");
$(window).resize(function() {
let listPosition = list.position().top;
let hiddenItems = listItems.filter(function(){
return $(this).position().top - listPosition > 0;
}).clone();
dropdownMenu.html(hiddenItems);
});
I see you're using bootstrap. You still can do this without any JS if a collapsible menu on mobile devices is what you need.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Bootstrap Navbar links overlap when resizing the browser

I made Bootstrap Navbar logo in the middle. Here is a picture of the result:
however i have 1 issue:
when i resize the browser, the nav links seems to overlap on each other.
what im looking for is when i resize the browser the links remain relative to each other and not overlap until it collapses in bootstrap toggle button. What would be the solution here?
here is HTML and CSS
html,
body {
height: 100%;
width: 100%;
font-family: 'Arial', 'Poppins', sans-serif;
background-color: #2d2d2d;
margin: 0;
}
.navbar {
width: 100%;
z-index: 999;
background: #2d2d2d;
;
margin-top: 0;
padding: 2em;
/* display: flex; */
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
top: .1%;
position: absolute;
}
.navbar-nav li {
padding-right: 40px;
font-family: 'Myriad Pro';
font-weight: bold;
/* display: inline-block; */
}
#mt-nav-left {
position: absolute;
transform: translateX(60%);
right: 60%;
}
#mt-nav-right {
position: absolute;
transform: translateX(-65%);
left: 65%;
}
#banner {
overflow: auto;
z-index: 998;
}
#banner img {
width: 100%;
object-fit: cover;
}
#media (max-width: 1024px) {
#mt-nav-right {
position: static;
}
}
#media (max-width: 991px) {
#mt-nav-left {
position: relative;
}
#mt-nav-right {
position: relative;
}
}
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggle">
<i class="fas fa-bars" style="font-size: 21px;"></i>
</span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/logo.png" width="85px" height="85px" class="d-inline-block align-top">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto" id="mt-nav-left">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto" id="mt-nav-right">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>
You can use flex-box to solve it. The idea is to place an empty box between two lists, with the following properties
flex-shrink: 0;
flex-basis: 100px //(not less then the width of your logo);
Look at the snippet that I made.
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menu {
width: 100%;
}
.menu .navbar-nav {
flex-grow: 1;
}
/*
THIS CLASS PREVENTS OVERLAPING
*/
.menu .separator {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
max-width: 250px;
background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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" id="navbarSupportedContent">
<div class="d-flex menu">
<ul class="navbar-nav mr-auto justify-content-end">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- Box that prevents overlaping -->
<div class="separator">
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
This is my approach for a navbar with your specifications using Bootstrap 4.
1) There are two navbars-collapse items, the first one with items justified to the end, the second one with the default items justified to start (we will call these A and C respectively).
2) The brand (called B) will be centered using the class mx-auto, the effect of overflowing the navbar is approached using next style (only on not collapsed mode):
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
3) We manage the order of the items (A, B and C) using Order classes, on small screen devices the order will be B -> A -> C, on large screen devices will be A -> B -> C. We also use the Spacing utilities p classes for add some padding between items.
This is just my idea, you can check next example (on full screen mode) and play with the browser's width. I hope this helps you...
.navbar {
z-index: 999;
background: #2d2d2d;
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-nav li {
font-family: 'Myriad Pro';
font-weight: bold;
}
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark sticky-top w-100">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="toggle">
<i class="fas fa-bars" style="font-size:21px;"></i>
</span>
</button>
<div class="navbar-collapse collapse dual-nav justify-content-end order-1 order-md-1">
<ul class="navbar-nav">
<li class="nav-item p-2">
<a class="nav-link scroll" href="index.html">
HOME <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto order-0 order-md-2 p-3" href="index.html">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" width="85px" height="85px">
</a>
<div class="navbar-collapse collapse dual-nav order-2 order-md-3">
<ul class="navbar-nav">
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>

Categories