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;
}
Related
I was wondering if someone could help me make it so that the content does not drop down without it messing the sub menu up. I tried changing the sub menu to position: absolute but that just messed up the sub menu and I also tried z-index: 2 and that didn't help.
The only other idea I would have to fix it is to somehow apply something like the position: absolute to the text but, I am not sure how to do that.
If anyone could help me I would greatly appreciate it
Add this piece of css at the end of your style file
nav ul li {
position: relative;
}
nav ul ul {
position: absolute;
width: 100%;
}
For sub-menu to not push the content down it needs to have position: absolute style. Other bits of css is to fix the styling and sub-menu width.
you should add following css to your code
nav ul li {
position:relative;
}
//add class on sub-menu(.drop-down)
.drop-down{
position:absolute;
top:100%;
left:0;
right:0;
z-index:1;
}
//z-index value set as your needs
Make your dropdown menu's position: absolute; and then the element under it as position: relative;.
If this doesn't work, try to make both the dropdown menu and the element under it as position: absolute; and then set the z-index of the dropdown as higher than the element below it.
I made the dropdown and the element under it positioned absolute (both of them), and it worked. The dropdown menu is now ignoring the element under it.
I've got a mess with two links at the top of this page ("WORK" and "ABOUT").
http://danux.me/
I'm not sure why I can't get them to style. I only seem to be able to apply a float and nothing else in the CSS does anything.
#nav_container {
float: right;
position: relative;
padding-right: 110px;
padding-top: 60px;
}
#nav_container li {
float: left;
display: inline;
color: #fff;
list-style: none;
text-decoration: none;
cursor: pointer;
}
As far as the clickable part, if I expand my browser so they are off to the right of the tiled images they are clickable.
I have the tiled images set to relative for that overlap effect, and the blue bar is set to absolute.
I have the z-index higher for the tiled images and tried applying a higher z-index to those nav links thinking I could get them to pop up on top and be clickable, but no dice.
Any guesses?
The problem is that your #home_console_wrapper element actually overlaps your #color_beam, and has a large padding-top on it to hide this behaviour. It also has a higher z-index, meaning that it will make your links unclickable.
To rectify this, you need to remove position: absolute from #color_beam, and padding-top: 190px from #home_console_wrapper.
This will cause your links to become clickable, without changing the display at all.
If you would like to still have the slight 'overlap' effect, simply set a negative margin-top on #home_console_wrapper:
#home_console_wrapper {
margin-top: -35px;
}
Hope this helps! :)
I am working on a site here: http://americanbitcoinacademy.com/
When you scroll a bit on the site a fixed nav will appear but on this fixed navigation I want to hide the logo nav BUT I still want it to appear on the regular nav bar on the top.
Here's the CSS I am using:
.nav>li>a>img {
max-width: none;
}
.menu-item a img {
border: none;
box-shadow: none;
vertical-align: middle;
width: auto;
display: inline;
}
I want it to hide on a black fixed nav but I still want it to appear on the regular nav. ANy idea how to do so?
You can use the inspector of Chrome to check this out.
The nav menu has class .affix when it is fixed/black, so using that as the parent selector to hide the image should hide it in the fixed state without affecting the menu's default state.
.main-menu.affix .menu-image {
display: none;
}
Can't use chrome as I am on iPad, as the navy bar looks different at the top and when it's further down the page, I'm guessing that at some point you apply a different class to the nav div?
You can target the img within that class with the style display: none;
Hope this helps, if not I'm sure some one on a computer can give more of an example
I'm creating a navigation bar for a website and I want the menu elements to change background color when I hover the cursor over them. The color changing part works however, if I take a closer look at the nav bar when I hover the cursor over one menu element I can see that the nav bar (div) and the menu elements (a) aren't the same height. (The red rectangular isn't as high as the orange one.) It's just one px or so but it's really annoying. I used 20px padding for the height, but apparently something's wrong and I'm sure there's a better way to make it work. I'm new to web development and CSS by the way.
div {
background-color: orange;
padding: 20px;
}
a {
padding: 20px;
}
a:hover {
background-color: red;
}
<div>
Menu 1
Menu 2
</div>
Thanks for your help in advance.
Have you tried:
div {
background: orange;
}
a {
display: inline-block;
padding: 20px;
}
By setting display: inline-block; on your <a>, the padding should behave as required.
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;
}