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
Related
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 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'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.
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 am using a template based off of Twitter Bootstrap for a site I'm building (here's the link: rwphoto), but I am having some trouble with the mobile drop-down menu. It overlaps instead of pushing content down if I change the navbar-inner div to 194px to fit the height of the repeating image I'm using. I am just not sure exactly why this is a problem. I've looked around, but can't seem to find a solution to this.
Additionally, how would I center the .brand element (logo) in mobile, instead of having it to the left? And how would I get the nav links centered vertically, and horizontally between the logo and the right edge of the screen?
sigh... Sorry, first time using Bootstrap, obviously... :/
For Centering logo, implement this css code to the referred class...
.container { position:relative; }
.brand { text-align: center; width: 97%;}
.navbar .btn-navbar {
display: block;
position: absolute;
right: 0;
}
For Centering, the nav links,
.nav-collapse .nav > li > a {
margin: 12px 0 !important;
text-align: center;
}
And for the drop-down overlay issue, add this,
.nav-collapse { padding-top: 1em; }