I am trying to put a solid white background behind this navagation bar so when it scrolls it does not show whats behind it.
CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo
<div id="header">
<img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<li class="items">Programs</li>
<li class="items">Rentals</li>
<li class="items">Contact Us</li>
</ul>
</div>
</div>
In theory I should be able to just put
#header {
width: 100%;
height: 150px;
padding-bottom:20px;
background-color:#FFFFFF;
border:
z-index: 3;
color:white;
}
and it work properly correct?
Give fixed position to header :- DEMO
#header {
position: fixed;
}
Since there is position:fixed currety navbar is not part of #header. So HTML structure should be altered a bit.
Add position:fixed to #header instead of nav bar
Add a paernt div for body content part and give top margin (margin top = header
height)
DEMO
Related
I want to add image/logo inside Nav Bar.
How to make sure that the nav bar height always fit the image and the other elements stay in center.
I am currently using nav bar with Nav-wrapper class from materialize framework.
I have tried to add min-height to nav-wrapper but that make the other elements slide off from the center.
Code pen link
Try like this its working for me
step-01 Im added this class navbar-brand
step-02 Im added this CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 64px;
padding: 0px;
width: auto;
}
.black {
background-color: #111 !important;
}
nav
<nav>
<div class="nav-wrapper black">
<div class="container">
<img src="http://www.becomeanengagedemployee.com/wp-content/uploads/2012/03/flow-200x75.jpg">
<ul id="Nav2" class="right hide-on-med-and-down">
<li><i class="material-icons">search</i></li>
<li><i class="material-icons right">refresh</i>Link with Left Icon</li>
<li><a class="waves-effect waves-light btn">Button</a></li>
</ul>
</div>
</div>
</nav>
Codepen
Hi I have a responsive Dropwdown menu:
<div class="main-nav">
<ul id="menu-horizontalnav" class="menu">
<li <a> </a> </li>
<li <a> </a> </li>
<li <a> </a> </li>
</ul>
</div>
The size of the main-nav is smaller than the size if the ul.
See the red box in the picture above. The .css parameter for the ul is
.js .main-nav .menu {
position: absolute;
z-index: 1000;
top: 30px;
width: 100%;
}
If somebody could help me get it to work that the width of the 2 elements aligns i would be very happy.
It looks width is not including the border
Add box-sizing:border-box for the element on which border is given it will fix it, which will give padding, border from inside without extending the width
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I have a top dropdown navigation on my website, that I want the background color to be different on. The color of my website background is a grey, while I would like only the tab part to be (ex.) white.
The CSS for my background color is as follows:
body{
background-color:#D0D0D0; margin-right:10%; margin-left:10%; margin-top:0%;
}
I would like my dropdown navigation to have a white background while keeping the rest of the page the same. My dropdown is in a header.php file, then referenced in.
My navigation HTML is as follows:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
My CSS, of course, styles this header.php.
This is my website.
Thanks in advance!
Change the CSS to this:
nav {
background-color: #fff;
margin: 0px -12.5%;
}
Gives the following result:
If you're not happy with this solution, you are going to need to modify the HTML.
Put an id on the nav tag and style the menu over css.
Html:
<nav id='nav'>
// menu
</nav>
Css:
#nav {
background-color: 'white';
}
I'm pretty sure you just need to set the nav background as white..
in your css:
nav { background-color:#fff; }
Extending the full width:
can also be done with HTML resdesign
HTML
<body>
<nav>
<!-- nav code -->
</nav>
<div id="container">
<!-- all of the rest of your code -->
</div>
</body>
CSS
body { }
nav { background-color:#fff; }
#container {
background-color:#D0D0D0;
margin:0px 10%;
}
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.