This question already has answers here:
Make a nav bar stick
(11 answers)
Closed 3 years ago.
want to ask. How do I stick my nav bar at the top when scrolling down? I have searched for some tutorial but I don't know how to combine the code together with mine. When I added the entire nav bar will go out of place.
Below is my style code for the nav bar:
<style>
.navbar {
overflow: hidden;
background-color:#333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
Here is a related question which might be able to help: Make a nav bar stick to the top when scrolling with css
Basically you need to set something like this:
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
It sounds like you're looking for a Sticky Navbar ("sticks" to the top of the viewport). Are you using Bootstrap? If so check out Bootstrap's NavBar Documentation.
Related
I've been fighting with this for a while now and have gone through the posts I could find here. I think my bootstrap.css is overriding the css I've added to my style.css. My dropdown button isn't clickable. I have tried everything I've seen in here: placing my custom css prioritized over bootstrap, I've tried editing the button and dropdown settings in bootstrap.css, etc. There's too much in my bootstrap to post here, but here's the code I'm trying to get working. I'm not sure if it's dropdown, button, navbar, etc that's causing the conflict.
HTML:
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
EDIT:
Here's my bootstrap.css
I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).
My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.
Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.
See below current code:
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Your help will be greatly appreciated.
For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.
Your code doesn't show any CSS showing position fixed anywhere.
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed{
position:fixed;
width:100%;
top:0;
}
<div class="fixed">
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>
I'm making a navigation bar for a site that I'm working on, and one of the links will show a dropdown on hover. Currently, my dropdown content displays nowhere near below the dropdown where I would like it to be. This is probably a simple problem, but I would appreciate any help!
HTML:
<nav>
HOME
ABOUT
BLOG
<div class="dropdown">
PROJECTS
<div class="dropdown-content">
Client Work
Personal Projects
</div>
</div>
</nav>
CSS:
nav {
margin-top: 4.3vmin;
text-align: center;
display: none;
}
.nav-item:link {
color: #9422ed;
text-decoration: none;
padding: 3.7vmin;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.nav-item:visited {
color: #9422ed;
}
.nav-item:hover {
color: #5c0d99;
text-decoration: none;
}
.nav-item:active {
color: #5c0d99;
}
.dropdown {
overflow: hidden;
display: inline;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 10px 14px;
}
.dropdown-content a:hover {
background-color: #e7e7e7;
}
.dropdown:hover .dropdown-content {
display: block;
}
Thanks in advance!
Set your .dropdown to position: relative; and then set .dropdown-content left & top or margin styles for fine positioning.
I am currently struggling to align the dropdown menu I have created. I need it to align to the left as it is currently aligning to the centre. I have created a jsfiddle to demonstrate my current code and the issue.
JSFiddle - https://jsfiddle.net/wu9gnsj5/
.menu {
float: right;
margin-top: 22px;
margin-left: 45px;
margin-right: 140px;
padding:0;
list-style: none;
font-weight: 700;
}
.menu div {
float: left;
margin-left: 30px;
}
.menu div a {
color: #42494e;
}
.header div.menu div a:hover {
color: #e60000;
}
.dropbtn {
color: black;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
padding-bottom: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:100%;
left: 0%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {}
Any help would be greatly appreciated.
You have a css class that targets all .menu > div elements with margin-left: 30px;, including your dropdown.
You can override this by resetting the margin in your dropdown class.
.dropdown-content {
margin-left: 0;
}
My drop down menu on my navigation bar is called "Works". I can't seem to figure out why "Works" has a grey box surrounding the word while the other words on the navigation bar do not.
My CSS for the nav bar and drop down menu:
nav {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
margin-bottom: 30px;
line-height: 1.5em;
text-decoration: none;
}
nav a, .dropbtn {
display: inline;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
font-family:"mrs-eaves";
}
.dropdown {
overflow: hidden;
}
.dropdown {
cursor: pointer;
font-size: 25px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: "mrs-eaves";
margin: 0;
text-decoration: none;
}
nav a:hover, .dropdown:hover .dropbtn, .dropbtn:focus
{
background-color: rgb(247, 219, 255);
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.show {
display: block;
Here is my html:
<nav>
<center>
Home
<button class="dropbtn" onclick="myFunction()">Works
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Drawing
Animation
Design
</div>
About
Contact
Links
</center>
</nav>
If it must be a button, add the following CSS
.dropbtn {
background: none;
border: none;
}
Then, in your CSS where you set the hover color, change it to this
nav a:hover, .dropdown:hover, .dropbtn:focus, .dropbtn:hover {
background-color: rgb(247, 219, 255);
}
Edit:
Added cursor change so its a pointer for consistency when the button is hovered.
JSFiddle
It is standard button style. So, if you want it to be transparent, you should add certain styling for your button class (.dropbtn).
It is,
.dropbtn {
background: none;
border: none;
}