A client of mine is having a strange problem with their sites navigation.. on certain pages their hover class appears to show what page you're currently viewing. But on others it doesn't?
I didn't design this site, but I'm helping them work on it, so I'm a tad bit lost.
http://www.hycroft.com/
The suites and policies don't show when you're currently on them, but the rest do.. if anyone has any insight I'd appreciate it.
The hover image is set in your menu css here,
#nav li:hover, #nav li.sfhover,
body.index #nav li.index,
body.amenities #nav li.amenities,
body.concierge #nav li.concierge,
body.suites #nav li.suites,
body.specials #nav li.specials,
body.reservations #nav li.reservations,
body.location #nav li.location,
body.contact #nav li.contact {
background-position: 0 -63px
}
So when you are on the home page, the body tag has a index class added to it. It seems a different name is applied for pages where it does not show.
It looks like the style for the current page navigation item are controlled by a class on the body element. Adding the "suites" class to the body causes the pointer to show for it. The "reservations" class gets the policies menu item to do it.
Those classes aren't being applied to the body element for those pages. (Different classes are being applied, actually)
On the Suites page:
#nav li:hover, #nav li.sfhover, body.index #nav li.index, body.amenities #nav li.amenities, body.concierge #nav li.concierge, body.suites #nav li.suites, body.specials #nav li.specials, body.reservations #nav li.reservations, body.location #nav li.location, body.contact #nav li.contact {
background-position: 0 -63px;
}
Clearly the body class determines the highlighted menu, but on the suites page,
<body class="monaco">
Related
First, I apologize to not post my code right here.
I'm not sure this is a good idea since this is a kind of full project.
You can find an online-version here
My menu is stick to the top.
When users scroll, or chosse a section, the correct section will be highlighted in the menu. But if you click to a section, then scroll down / up, 2 menu secions will be highlighted.
So I would like to understand where is the problem, and so, how can i fix it .
This is happen because of 2 reason 1 is css issue and other on is js
CSS issue happen because of :focus Pseudo class styles you used. You apply :hover, :focus, :active and .active class same style. In your code I found this
a, a:hover, a:focus, a:active, a.active {
color: #f5c845;
outline: 0 none;}
To solve this used following style after the above code snippets
.navbar-default .navbar-nav > li > a:focus{
color: #777;
border-bottom: none;}
To check your js issue can you please share your related js part for the one page scroll.
I've created a four-layer menu using CSS (ul and li) combined with PHP which pulls the options out of a database. It's not for navigation but to allow the user to filter up to a certain level of detail
Example: http://jsfiddle.net/7LFT5/
If you take the path "part of building" > "exterior" > "garage / car port" > "garage door", you'll see that the user would easily get confused about what path they've taken.
I'd like to highlight the path they took in a different colour. It would be ideal to do this in CSS - which feels like it should be possible, since the path is generating the visibility of menu items. I've been playing around with the css below, hoping :hover or :active would work - but no luck yet.
nav.filter li ul li ul li:hover ul {
display: block;
width: 150px;
padding: 0px;
left: 170px;
top: 0px;
/* margin: 0px; */
z-index: 3;
}
Has anyone done this before?
You need to change this selector:
nav.filter ul li a:hover {
Because you need to keep the highlight on the a tag when hover the entire content of the li
To this:
nav.filter ul li:hover > a {
Check this Demo http://jsfiddle.net/7LFT5/1/
Now combining the two selectors you can have one color for the active and one on the hover item like this :
http://jsfiddle.net/7LFT5/3/
was wondering if there was a better way to handle what I'm trying to do. I've made a basic drop-down navigation menu where the menu bars are li and class elements with a set height with the overflow property set to hidden, which then animate in height to reveal the 'drop down' portion of the animation when hovered over with the mouse. I found however that other web page elements (like main content) would then be pushed around and re-positioned when the menu elements collided with them. I stop-gap fixed this by making the affected elements absolute positioning, but I can't help but feel there's a better, more effective way of fixing this.
Is there any way to make it so the navigation elements for lack of better word get 'ignored' positioning-wise?
Here it is in practice - the first 'article' area has been made to be absolute positioned - http://gamearticlesite.bbdesigns.ca/index.html
the code:
Jquery
//When mouse rolls over
$("li.extend").mouseover(function(){
$(this).stop().animate({height:'250px'},{queue:false, duration:500})
});
//When mouse is removed
$("li.extend").mouseout(function(){
$(this).stop().animate({height:'35px'},{queue:false, duration:500})
});
CSS:
#headerNav ul{
list-style-type: none;
color:#efefef;
margin:0;
margin-left:75px;
padding:0;
}
#headerNav ul li{
width:125px;
height:35px;
float:left;
color:#efefef;
text-align:center;
margin-left:10px;
margin-right:10px;
overflow:hidden;
}
The correct answer was that yes, Absolute Positioning is the way to solve this, but to use it on the navigation menu. In the example posted, on the ul element, not the individual li elements that would animate as that could cause issues with positioning of the li elements within the ul element.
Setting the position to position:absolute for the ul and giving a z-index property to make sure it's 'on top' of the elements it clashes with made everything work out just fine.
Use
float:left
or
position:absolute
I'm working on my personal portfolio with bootstrap and the navigation dropdown has a caret as you can see at http://portfolio.tomvervoort.net.
The caret next to portfolio is ok but when you click on portfolio the dropdown also has a white caret on top. Does anyone knows how to remove this one?
Your caret is inside .dropdown-menu:after. So, write like this:
.navbar .dropdown-menu:after{
display:none;
}
Had the same problem in Rails (with twitter bootstrap rails gem), and the fix was slightly different.
.navbar .nav > li > .dropdown-menu::after,
.navbar .nav > li > .dropdown-menu::before {
display:none;
}
In the current version of TBS (v2.2.1), you also need to target the :before pseudo-selector like so:
.navbar .dropdown-menu:after, .navbar .dropdown-menu:before {
display:none;
}
Try doing this:
.navbar .nav > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu:after {
display:none;
}
works fine for me. :-)
from git hub post
now we can directly use noCaret prop. this post is basically from DropDownButton but it works for NAvButton as well
After trying a few solutions and trying to follow the right class references, a quick fix, but nest it if you can so it doesn't affect other global a tags:
a::after {
content: none !important;
}
I have a pure css/html dropdown menu, the code for which I pretty much stole from csswizardry here. It works like a charm; the only problem is that, if that menu item is on the far right side of the page, the dropdown items are half-off the page.
I'm working on a javascript solution; is there a way to fix this problem using just CSS?
EDIT: I'm looking for the dropdown content to move to the left so that the dropdown items are fully visible.
Looking at the code you based it on, instead of
#nav li:hover ul { left:0; }
...you'd want:
#nav li:hover ul { left:auto; right:0; }
Looks like you may need to adjust the right margin of #nav li if you're using the same CSS as csswizardry.