I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)
Related
I need a help. I used the code from Bootstrap example but it didn't work.
I put data target on Javascript, and i also put data-target on body.
The code is full copy from bootstrap-5 scrollspy, but i don't completely understand how to use it. Thank you for your help.
$('body').scrollspy({ target: '#navbar-example2' });
<body data-target="#navbar-example2">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">My Project</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<section id="scrollspyHeading1">
</section>
<section id="scrollspyHeading2">
</section>
<section id="scrollspyHeading3">
</section>
<section id="scrollspyHeading4">
</section>
</div>
</body>
As explained in the Bootstrap 5 docs..
"Scrollable containers and keyboard access If you’re making a
scrollable container (other than the ), be sure to have a height
set and overflow-y: scroll;..."
For example,
.scrollspy-example {
position: relative;
height: 300px;
overflow: auto;
}
Demo
<div class="container"> <!--main div-->
<div>
<nav class="navbar navbar-light bg-light">
<img id="logo" src="logo_white_background.jpg"></img>
<ul class="navbar-nav list-unstyled">
<li class="nav-item">
<button>Login</button><!--Login Link-->
</li>
<li class="nav-item ml-2">
<button>Explore Live Experiments</button><!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
</div>
</div>
</body>
This code works fine to give me the desired navbar. However the login and the explore experiments button don't align to the right. In Spite of trying to add mr-auto and mr-right to the ul. Tried doing custom css align right but no response. How do i make the two buttons go the right of the nav bar?
Can you please check the below code? Hope it will work for you. If you add bootstrap 4 then it's working fine and you want to set the button in the same line then you have to add flex-direction in .navbar-nav so it's work as per your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/syakr3j5/
.navbar-nav {
flex-direction: row !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!--main div-->
<div>
<nav class="navbar navbar-light bg-light">
<img id="logo" src="logo_white_background.jpg">
<ul class="navbar-nav list-unstyled d-flex">
<li class="nav-item">
<button>Login</button>
<!--Login Link-->
</li>
<li class="nav-item ml-2">
<button>Explore Live Experiments</button>
<!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
</div>
</div>
<nav class="navbar navbar-light bg-light d-flex">
<img id="logo" src="logo_white_background.jpg"></img>
<ul class="navbar-nav list-unstyled ml-auto">
<li class="nav-item">
<button>Login</button><!--Login Link-->
</li>
<li class="nav-item ml-2">
<button>Explore Live Experiments</button><!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
add d-flex class on <nav> and ml-auto on <ul>
[scrollspy samp[scrollspy][1]le]
now having removed the padding in the about us section, the scrollspy is not aligning to the about us, i need help on how to fix the scollspy while maintaining the picture aligned to the paragraph.
</style>
</head>
<body id="#navbar" data-spy="scroll" data-target="navbar" data-offset="10">
<nav id="#navbar" class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<a href="#" class="navbar-brand">
<img src="logo.png" alt="Logo" style="width:80px;">
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="navbar-nav">
<a class="nav-link" href="#About Us">About Us</a>
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Porfolio
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
Remove the padding-top:85px style attribute from the "About Us" div - that creates a 85px high white space which apparently you don't want.
Also, the h2 in there will have a relatively high default top-margin which also creates white space above the text, so you might want to add margin-top: 0 to that h2.
The navbar sticks to the top until I scroll out of the hero-image then disappears. I'd like the navbar to be present throughout the whole page. Any ideas?
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Me</a>
</li>
</ul>
</div>
</nav>
<!--Navbar end-->
<!-- Homescreen hero -->
<div class="hero-image" id="home">
<div class="hero-text">
<h1 class="name">Text</h1>
<h1>Text</h1>
</div>
</div>
You can try to use fixed-top instead of sticky-top.
I don't know which browser you're using, but the documentation states Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.(https://getbootstrap.com/docs/4.2/components/navbar/#placement)
Just remove any height declaration from the body tag in your css.
e.g. Remove things like this:
body { height 100 vh or %;}
Edit: Also make sure to give top:0 to your sticky navbar element
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 1 year ago.
I'm trying to get my nav links to float to the right of my navbar, but I can't get it to work. I've tried using the ".float-right", "float-xs-right", and "justify-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work.
Here is the HTML for the navbar of my website:
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
And here is the CSS:
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
I'm relatively new to the Bootstrap 4 framework, so it's possible that I might just be making a dumb mistake, but hopefully someone can help me. :(
Bootstrap 5 (update 2021)
The Bootstrap 5 Navbar still uses flexbox, but the concept of right and left, have changed to start and end for new RTL support. Therefore, the class names have changed...
float-right --> float-end
float-left --> float-start
ml-* --> ms-*
pl-* --> ps-*
mr-* --> me-*
pr-* --> pe-*
BUT, remember floats don't work with flexbox. The best approach for right alignment in the Navbar is to use ms-auto (margin-left: auto) or justify-content-end.
See this question for details
Bootstrap 4
The original answer no longer works in Bootstrap 4, and it's not good practice to use Bootstrap's .row in the navbar component. The .row should only be used for grid columns.
Now that Bootstrap 4 is flexbox, one way to align navbar components is using the auto-margin utility classes, such as ml-auto which is a shortcut for CSS margin-left:auto. This can be used to push the nav to the right...
https://www.codeply.com/go/ZAGhCX5lpq
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Or the flexbox utils like justify-content-between can be used on the container inside the navbar...
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container justify-content-between">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Just notice that in this case justify-content-between works because there are only 2 navbar components (navbar-brand and nav).
You can use .justify-content-between on the parent .row to move the flex children to the far edges of the row.
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row justify-content-between">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
I tried with Bootstrap 4.0.0 Alpha 6 and it works, here's the example: https://repl.it/JwMq/0
I just added this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
And a extra </div>