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.
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 responsive menu on top of an image background, which also has text on top.
Because I have to set the text messaqge with "position: absolute" to make it overlay on top of the background image, when I expand the menu the menu items will overlay on the text message. How do I fix that?
The other problem is I'd like to have the menu be transparent on the background image instead of being on the dark grey background. However, I can't seem to find a way to do that.
Here's the code
You may want to consider for you header message to put it inside of your header-slides div and then position this div to relative. That way your header message is actually positioned absolutely in the header and not in the body. Then if you want your nav to be transparent over the header image then you can position your body to relative just to be safe and position your nav to absolute, give it a high z-index and background opacity can be achieved by using rgba colors. So something like the following:
Here is a fiddle demo Fiddle Demo
Header:
.header-slides {
height: 500px;
border: 1px solid black;
position:relative;
}
<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'>
<h2>Header Message</h2>
</div>
Then your nav:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,20,20,0.8);
min-height: 30px;
position:absolute;
top:0;
left:0;
width:100%;
z-index:5;
}
And then remove the postion of relative from your responsive css at max width of 680px from your nav so remove the following completely:
ul.topnav.responsive {position: relative;}
z-index, bruh.
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
.topnav{z-index:9999999}
try it.
For transparent BG colors you can use rgba(). There are online tools to convert your colors all oer the place.
I am using master slider in (https://wordpress.org/plugins/master-slider/) and it works great. However I need to add a div on top of it to display something so I have used the below but it still sits behind no matter what number is inside the z-index.
#on-top {
margin-top:-50px;
z-index:9999;
}
You have to position an element in order to use z-index : position:absolute; or position:relative;
#on-top {
margin-top:-50px;
z-index:9999;
position:relative;
}
z-index will not work for static elements.So it should be relative, absolute or fixed positioned element.
I have some divs and I want that when I get the screen bigger(CTRL +) , the scrollbar appears at the bottom of the page and the divs STAY inline block. I have the code here(http://fiddle.jshell.net/JNzFp/) and as you can see when you get the screen bigger , scrollbar appears under the divs and I want it to display on the bottom of the full screen not under the divs, and ALSO I don't want vertical scrollbar.
Use this CSS overflow:hidden
http://fiddle.jshell.net/zCxhK/
Below is a demo of the different overflow properties.
UPDATE: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Scroll bar appears in #menu div because you have used overflow: auto in its css. Use hidden instead of auto for not allowing scrollbar to appear below the divs
UPDATE- For that you have to make your menu div 100% of the body
DEMO
CSS -
#menu{
white-space:nowrap;
overflow:auto;
width:100%;
/*height:40px;*/
height: 100%;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;...
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.