my site Deliver .I have set the current menu color and hover colors respectively.the issue is when we scroll down the header is getting fixed at the bottom with a slight height change.so the menu colors are overlapping which i feel not good . so i tried in css
.adjustsub nav ul li {
height:40px !important;
padding 0 0 0 0 ;
}
nothing seems to be working.Please help!!!
EDIT
i need that in full height that of the header and when we scrolls down it should fit the fixed header size.reducing height doesn look good actualy
Apply this:
.adjustsub nav ul li {
height: 38px; /* decreased height */
}
The height of .menu li was the problem. Use this CSS:
nav .menu li {
height: 38px;
}
Edit
.fixed_slider header#header {
border-bottom: none;
height: 58px;
}
Related
Can someone please help me with my Navigation Bar? I have been trying to research how to create one myself, but the buttons seem to end up small, and the bar itself won't stretch to the entirety of the page despite the width 100% snippet. Thanks in advance.
.navBar {
width: 100%
}
.navBar ul {
list-style-type: none;
}
/* Styling of buttons on the NavBar */
.navBar ul a {
float: left;
background-color: #202020;
color: #ffffff;
padding-bottom: 12px;
display: block;
text-decoration-line:none;
font-family: 'Montserrat', sans-serif;
size: 20px;
}
/* Styling of NavBar buttons when mouse hovers over it */
.navBar ul a:hover {
background-color: #006633
<div Class=navBar>Test
<ul>test1</ul>
<ul>test2</ul>
<ul>test3</ul>
</div>
You're looking for CSS relative units.
If you want to make an element match the total width of the screen (specific wording here) then you want to use width: 100vw;. If the element is not rendered at the left (or right) most pixel it would overflow past the screen. Using width: 100%; would have the same effect only it's relative to it's parent element, not relative to the total width of the screen.
It is good practice to add CSS Resets to the top of your CSS styles. Web browsers have default margins and padding which can prevent your divs from extending the full width of the screen.
Add this to the top your CSS Stylesheet.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
This code will reset the browser default margins and padding. Your navbar should then take up the full page width when you use .navBar { width: 100%;}
For your buttons you can add more padding until you are satisfied. For example:
.navBar ul a {
padding: 10px 30px;
}
This will give your buttons 10px padding on the top and bottom and 30px padding left and right.
As mentioned above, please select the answer that was most useful to you.
I made a navigation menu 100% width fixed to the top of the page.
#nav {
height: 50px;
}
I've used line-height to put text in center of the nav before but it's not working when I do this..
#nav ul li a {
line-height: 50px;
}
It is appearing half way off the bottom of the nav
OK, You seem to have missed the fact that browsers have some inbuilt styles for the elements like <ul> etc.
And that margin for the <ul> is pushing the whole menu down.
Try "normalizing" your css by including
ul {
margin: 0px;
}
As shown HERE.
I know this is probably a stupid question. But say I have a navigation menu, would it be more practical to set a fixed height..
nav {
background: red;
Width: 80%;
height: 60px;
}
nav ul li {
Line-height: 60px;
}
Or to use padding to define the height?
nav {
background: red;
Width: 80%;
Padding: 30px 0;
}
I usually go with the first choice. But I'm worried that the font size might change in different computers/browsers and therefore becomes unproportional with the container. Could this actually happen?
Your vertical padding should probably go on the
nav ul li a
That way, if the anchor text scales up, so does your header and everything doesn't break out, and you have a larger clickable area. Also, don't leave the anchor display inline.
For some reason when I hover over menu links on my site, half of the content (image slider) below disappears.
I cannot seem to figure out why this is happening
URL: http://swampfighter.bmdigitalgroup.com/
Thanks so much!
It is because you are setting the height to 100% on the hover state for the list item. If you remove that it should behave correctly.
If you want it to cover the whole height of the navigation bar, I would set my hover styling to this:
.navbar ul li:hover > a {
position: relative;
height: 90px;
background: #7eb378;
z-index: 1000;
}
I have a series of background images that need to fade in and out and appear in the background. This background image appears behind my content, is centered, and is wider than my content. I do not want this image to affect the width of my page so there is no width set on the container div, ul, or li elements. I need to determine why there is a white left margin showing up over my background image. This margin shows up no matter how wide the browser window is as shown by my "test" li. The problem appears across browsers (tested: FF, Safari, Chrome, IE8) and has nothing to do with the javascript used for the rotation and fade.
I'm sure this is something dead simple that I'm overlooking. Many MANY thanks to anyone who can point me in the right direction here.
Link to an screenshot showing the problem.
Live example of the problem.
The HTML for this is:
<div id="hdrHomeWrap">
<ul id="hdrHome">
<li class="hdrHome1"></li>
<li class="hdrHome2"></li>
<li class="test"></li>
</ul>
CSS:
#hdrHomeWrap {
margin: 0 auto;
position:relative;
top:-20px;
}
#hdrHome #hdrHome li {
margin:0;padding:0;
position:relative;
list-style:none;
}
#hdrHome li {
display: block;
height: 400px;
display:none; /* hide the items at first only */
list-style:none;
}
#hdrHome li.hdrHome1 {
background: url('images/hdr-home1.jpg') no-repeat top center;
}
#hdrHome li.hdrHome2 {
background: url('images/hdr-home2.jpg') no-repeat top center;
}
#hdrHome li.hdrHome3 {
background: url('images/hdr-home3.jpg') no-repeat top center;
}
#hdrHome li.test {
background: #F00;
}
Have you tried giving the ul (#hdrHome) a margin & padding of 0?
In your CSS, you have
#hdrHome #hdrHome li
I'm guessing that's a mistake. You are either missing a "Comma" in between.
So it should be like #hdrHome, #hdrHome li instead of the other