side menu bar works fine until I add class. please see example
before
JSFiddle
after
adding class="active" to My Account Home. Demographics <LI> completely pushed up and it is invisible. How can align like first pic like the order.
After JSFilddle
Related
A sub-menu div in a navigation bar isn't displaying on hover in OS X Safari 10.0. It works fine in Chrome and Firefox.
Here's a JSFiddle: https://jsfiddle.net/rk5bmpud/1/
If you hover over "Our Services", then one sub-menu drops down, then hover over either "Risk Management" or "Integrated Services" and another menu should slide out from left to right. They do in other browsers, but not in Safari.
The elements in question are:
<div class="sub-menu">
<ul>
<li>
Risk Management Consultancy
</li>
etc...
</ul>
</div>
Safari's dev tools show that the div is opening and closing on hover as it should do (you can see the blue box highlighting the div when it's open), but the div and none of it's children are displaying.
I've tried different display properties, position properties and z-index in CSS. Different position properties allow me to see the div and it's contents, but of course not where I want them to be.
Can anyone see what I'm missing here?
Update
I've discovered that if the sub-menu's grand-parent div, with class .menu, is set to position: static; then the sub-menu in question is displayed. This isn't really a solution as I don't want to have to re-build it this way (although I will as a workaround if I can't find a proper solution). Interestingly, the position property of the sub-menu's immediate parent, <li>, doesn't make a difference.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I'm trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
I have two spry menus on one page. One is main site and one is that individual page's menu that shows and hides div accordingly.
The "artistMenu" div doesn't work and it doesn't even have the hover effects, although it's set up exactly like the site menu apart from the different UL id's
<div id="artistMenu">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li>Social</li>
<li>Music</li>
</ul>
<!--Artist menu end--></div>
CSS:
#artistMenu{
background-color: #000;
}
The main site menu is set up virtually the same way except it's in the header div with logo and has no background.
If I comment out the <div id="artistMenu"> the link's work however, I lose my background color and the contents below the menu, for whatever reason because un-styled as the pop out of the <div id="gridContainer"> and and spread the width of the page.
I've worked on this for 5 days off and on and can't figure it out nor find info online.
I have a UL that is centered properly in wide and narrow widths but breaks in the mid range. When it is wide everything fits nice, when the browser is narrow everything stacks nice, but when using a mid width, say 800px wide, the menu wraps to the next line, which works for now, but I would like to see if it was possible to center the second row of links. Here is a screenshot of how it looks on top (red circle), and what I want it to do on the bottom (green circle).
If you look at another thread, you will see kind of how my menu works right now in his example link. If you shrink the browser on his example you will notice the menu wraps and the second row is left aligned.
I would like to have the second row centered under the first row like in the picture above. Is this possible?
Here is the HTML:
<div id="navContainer"
<ul>
<li class="menu_home">Home</li>
<li class="menu_gallery squished">Gallery of Properties</li>
<li class="menu_service">Service Options</li>
<li class="menu_contact">Contact Us</li>
<li class="menu_test">Testing HotSpots</li>
</ul>
</div>
I don't think the CSS is needed since it isn't working like I want it to anyway (and it is spread out through about 38 different CSS files, everything is floating left, but I can add the css here if you think it might help, but I am willing to scrap everything anyway...)
Add
text-align:center;
to .nav ul in your Tinkerbin example.
or:
#navContainer ul {
text-align:center;
}
to your own css