As you can see here; http://bit.ly/sifpz9, when hovering over "whats new" or "accessories" in the primary nav, the tooltip-style sub-nav dropdown centers perfectly. However, when you hover over "clothing", it's not centered.
I've tried repositioning, however it just doesn't work for that nav "clothing" without ruining the other two.
Is there a better solution or a fix?
Thank you!
This is pretty easily achieved using the following CSS.
#top-menu ul ul {
margin-left: -87.5px;
left: 50%;
}
We use a minus margin of 87.5px because your width of the ul is 175px thus giving us half the width of the ul, we then move it left 50% so that it is in the middle of you li's anchor tag.
I hope this makes sense. Any problems leave a comment and I will get back to you.
Actually, it's just a coincidence that the submenu is centered for "What's new" and "Accessories", but they actually looks centered. The problem is that you're doing it wrong, defining a left style position fixed to -31px for the inner submenus.
But since those submenus have fixed width, you can rely on it using an old trick:
#top-menu ul ul {
left: 50%;
margin-left: -88px;
}
This moves the submenus to the center of the <li> element, and then back to the left of half (more or less) of its size.
Related
I have navbar which has a logo (MostafaOmar), and when I zoom out, the position moves as well.
Try zooming to 70%, and you will see the position of the logo moves as well.
How can I make it stay how it is when its at 100%?
Logo
.nav .nav-heading .brand {float: left}
it looks like the re-sizing of the parent div with the class of .container is resizing and this is moving the contents, including your logo.
if you force the container class width to 80%, this fixes the problem for any resizes. your text might grow and shrink, but the location stays in the same place. I tested in your codepen and it works.
.container {
width: 80%;
}
alternatively, as you might not want to change the whole class, you could add an ID to the navbar container, and target the width of that the same way.
let me know if this helps
cheers
I have a problem with position of submenu, when I open page submenu is positioned well but problem is when I scroll page and than try to open submenu it is out of position.
live demo
.has-sub.parent .wrapper {
position: fixed;
z-index:500;
}
I know that this problem is caused by use of position:fixed but if I try to change that than submenu is shown behind content div, I tried to fix that with z-index, but it didn't help, any suggestion would be great.
To be honest your fiddle is a bit of a mess... You can't use a fixed position for your submenu. You should use "absolute" position.
I add this to your CSS to modifed a bit all your nav bar:
.horizontalni li {position:relative;}
.navigation {z-index:100; ;}
.has-sub.parent .wrapper {position: absolute;}
.horizontalni {overflow:visible;max-width:100%}
body {margin:0; padding:0; overflow:hidden;}
and here you have your modified example: http://jsfiddle.net/gtw781sv/1/
Hope it can help you a bit.
Edited: change overflow:hidden to overflow:auto in "body" if you want to check it with scroll-bars
Hi Check the demo here
http://jsfiddle.net/adarshkr/gtw781sv/4/
Changes done in CSS
.horizontalni .has-sub .has-sub1 .wrapper{left:100%} /* Updated code */
I have a menu now, that can be found here... http://jsfiddle.net/EUaNY/
Now I'm wanting to have a sub menu that's the same style as that one, but shows up directly below it with the sub items for that particular link. Note that this menu is centered on my page with margin: 0 auto;, and the width of the page is width: 978px;. You can see this in .header-nav-menu. Sorry if I didn't include something my CSS is pretty basic. If you have any questions or anything I'll be happy to answer! Thanks!
BTW I would rather not use Javascript but if it's necessary that's fine.
I'm not sure if you wanted the sub-menu to appear on hover, but it's pretty trivial using straight CSS by adding these 2 classes:
.header-nav-menu li > ul {
display: none;
position: absolute;
width: 100%;
padding: 4px 0;
background: #3E0C0D;
}
.header-nav-menu li:hover > ul {
display: block;
}
Here's your updated jsFiddle http://jsfiddle.net/EUaNY/1/
If you mean that you would like each item in that header to provoke sub items to appear beneath it (either vertically or horizontally) there is no way to achieve this strictly with CSS. Sorry.
In this case, straight Javascript will be more complex than just tossing in a jQuery lib. Like this one...
http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php
I've got a fixed position menu at the top of my page, inside it is a div with the menu items and a .container class in order to center and limit the width. I can't seem to figure out how to limit my drop down menu to stay with in the .container class width limits. It keeps going off towards the right and will be cut off depending on page widths. Any help is really appreciated.
http://jsfiddle.net/rKaPN/47/
http://jsfiddle.net/rKaPN/51/
Changed:
//fixed so submenu will be relative to menuitem
.menu ul li{
padding:0;
float:left;
position:relative;
}
//if a rightmenu, float right instead of left
li.menu-right.drop-down ul{
display:block !important;
position:absolute;
right:0;
}
You'll probably need to make sure that your .container is using a percentage based width.
Your menu is floating to the right of the container... so if the container is set to 500px, but your browser is 400px, your menu is going to get cut off.
I'm trying to achieve the following:
I have a pop-in menu docked to the left side of the screen.
The menu has only a small tab visible. Upon hover - it pops to accommodate its content.
The problem is, my pages are sometimes a few screens in height.
And sometime, so is my menu.
I wish to be able to dock my menu to a fixed position (so the tab is always visible), and have the menu scrollable, without the ugly scrollbars.
How could this be achieved?
Add to your css:
html,body { height: 100%; }
#menu { height: 100%; overflow: auto; position: absolute; top: 0px; }
Make sure the #menu is a direct child of body.
If this doesn't work, give me a link to a demo, or make one in http://jsfiddle.net/