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
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
[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.
I'm trying to create a navigation bar in which the brand logo is on the left, but the navigation bar links are on the right. At the moment, the navbar links are on the right but are displayed on top of each other instead of next to each other:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
I've tried to right-align them using .justify-content-end following https://getbootstrap.com/docs/4.0/components/navs/, but so far it's not looking the way I want it. (I've also looked at the Bootstrap 4 source code but wasn't able to quickly determine what the issue was).
Update
If I use the following snippet,
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
then the positioning is as desired (see https://jsfiddle.net/qxdsam8t/10/) but the color of the links reverts to its default color of blue, instead of the light gray theme color. If I add the class navbar-nav to the inner div, then the colors go back to the theme colors, but the display is 'stacked' like I started out with. It seems that these properties are 'coupled'; how can I get the colors but not the 'stacking'?
The menu item stacking happens due to the .navbar-expand-lg class. xs/sm/md viewports will stack the menu items since the rendering should be stacked once the collapsed menu view (hamburger menu) is being used. You can see I changed it to .navbar-expand-sm to hopefully illustrate this better when running the code snippet (depending on how wide your browser is).
Also, add .justify-content-between to the <nav> element to right align the nav or you can add .ml-auto to the .navbar-nav <div> or even use .w-100 along with .justify-content-end to force nav to be full width.
You'll probably want to wrap the .navbar-nav element with: <div class="collapse navbar-collapse"></div> and include a navbar toggler button, similar to their documentation: https://getbootstrap.com/docs/4.0/components/navbar/#toggler
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark justify-content-between">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
The document you linked states to use either a <ul> element or a <nav> element.
Classes are used throughout, so your markup can be super flexible. Use
<ul>s like above, or roll your own with say a <nav> element. Because
the .nav uses display: flex, the nav links behave the same as nav
items would, but without the extra markup.
<nav class="nav">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
Your setup is not good at all. Take a look at bootstrap documentation here. To align your nav to right use "ml-auto" bootstrap class in ul element in your nav. Bootstrap 4 is all about flexbox layout, so you have to be really precise with HTML markup.
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 :)
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>