I have three menus on this test web site. I am learning css and trying menu2 & menu3 to inherit all properties from menu class. The second one looks bit different and is not clickable. I am happy with the 3rd one, just want to make it horizontal and change its position bit.
Could somebody tell me
why the second menu is not click-able?
how I can make the third menu vertical? I thought that display: block; for li of the 3rd menu would do the trick but I do not know the css path for that li.
Your second menu isn't clickable because your third menu box is covering it, it's box even though you can't see it is the same size as the area covered by the double horizontal lines.
The third menu isn't vertical because the lis have float:left
Use the following css to correct
.menu3 li
{
float:none;
}
.menu3
{
position:absolute;
}
You will need to set the left/top options for the .menu3 to position it on the page where you want.
If you use firefox firebug you should install the web developer and firebug extensions. If you use safari you can enable the developer tools, if you use internet explorer 8 then you can also enable developer tools. (Firebug is the best in my opinion).
The second menu is not clickable because the third menu is covering it. One way to fix that is to remove position: relative from .menu.
The path for the <li>'s in the third menu is for example .menu3 li, but I am not really sure what you mean by making it vertical. I hope you can find out a way with this piece of information.
A little hint... A tool like FireBug for Firefox is of good help for CSS trial n erroring.
Related
I'm trying to design my first responsive site and am having issues with the navigation. I've got everything somewhat working up to point where the hamburger kicks in. At that point, the drop down menu goes behind the form elements and I don't understand enough at this point to change the styling without affecting the normal navigation.
It seems that most of the things I've looked at are using the standard BootStrap elements with little more than color changes. I need to change the height of the nav bar (along with the hamburger), center the nav but when the site goes mobile, the nav dropdown would need to change font and background colors and text alignment.
I've got a bootply running and will continue to research as I go. I know I have a long way to go but would appreciate a helping hand getting me over this hurdle.
The bootply is at http://www.bootply.com/xtOWUEP1bw. Thanks in advance for any help.
You need z-index and background color.
Put z-index in .navbar and put background color in .navbar-collapse.in like below;
.navbar {
z-index: 10;
}
.navbar-collapse.in{
background:#fff
}
I've been searching and trying out some code to make my dropdown menu same size for each link, like nelly.se, but I can't figure that out. I was tried this code:
.nav-dropdown{position:fixed; left:0; right:0;}
but can't make it work at all.
The website I am working on is: http://94.247.169.169/~welloteket/
position: fixed will really fix it in relation to the window, which means it can't be scrolled at all - that won't work.
Usually for dropdowns you use position: absolute and adjust the left and top settings as needed. There are at least two important additional things:
1.) it has to be a direct child element of the element in relation to which you want it to fix. In the example you linked to that would be the black navigation bar, probably a ul element in there.
2.) That parent container has to have position: relative.
The kind of "mega dropdown" (i.e. equal size and position for each dropdown regardless of its related main menu entry) is trickier than a regular dropdown (i.e. one than opens directly under / next to its main menu entry). You propably need Javascript for this.
Apart from those general guidelines we can only help you if you post detailed code - HTML, CSS and JS, if there is any.
This problem is only showing up in IE7. Other browsers and IE8 and above work fine.
I am using a sprite map with an ul for my side navigation. There is a fly-out submenu for one of the li elements which also uses a sprite map with an ul for downloading various PDFs.
If you look at the image that I've attached, the submenu is appearing in the correct location, but it's pushing down everything below it. (The word "Music" should appear directly below the word "Menu".)
I have tried various fixes using a display: inline; element and position: static; element, but my attempts have failed. Would really appreciate some help on this. The website address is: http://www.graysonmain.com/
You could use a fixed height, height: 58px and display: inline-block for li#nav_02.
Have you looked into overlays with CSS? I'm very new to this so I, personally, can't give you a concrete answer, but it might be possible to set the positioning of the submenus and toggle the visibility with an onClick() command.
Guys
I am having hard time tweaking a CSS part of the menu.
I have a website here at http://aaron.wordpresstiger.com where the last title "CONTACT" of the menu comes up with a line ahead and doesn't fits the menu. though i was successful in getting the "HOME" first menu item correctly fitting the menu but not the last one.
Can you please tell me what CSS i should add to fix this MENU problem. Also, please have a look i need the last item of the menu to be showing as same css as the first one (HOME).
I need the menu's items to look similar to the one here:
http://officialfacebooklikes.com/index.html (have a look at the last "CONTACT" which fits the menu correctly).
I look forward to hearing back for HELP :)
Regards
Muzammil Rafiq
in your css you will want to add two styles
#access li {
width: 25%;
}
#access li:last-of-type, li#menu-item-31{
border-right: none !important;
width:24% !important;
}
the first will make each menu element 1 quarter of the width... the second removes the right border on the last element and re-sizes it to fit properly on one line of the navigation bar.
the !important tags may not be necessary but they will ensure this works on the first go.
Well, if you want to create a horizontal menu you should float the list items. But as I can see from your example website you want the list items to be even in width, so you need to put those list item into containers, determing the width for each list container and float those. Also text-align center your a tags.
Good Luck!
I'm trying to create simple mobile version of my simple horizontal one-level top menu. I'd like to replace the horizontal top nav with a vertical menu that is initially hidden but shows up when the user clicks the simple menu link in the top right of the screen.
In fact you can see what I've built so far at http://www.janparker.co.uk if you squeeze you window to be less than 768px.
It's almost a beautifully simply pure CSS result.
The menu works perfectly, but if a user first clicks on "menu" to activate the menu, then doesn't use the menu but instead clicks on some other link on the page OUTSIDE of the menu, a problem arises.
The link outside the doesn't work. Worse because the menu also closes and the page scrolls (both natural and not undesirable behaviors) the combination is utterly disorienting to the user if they are scrolled a long way down the page.
The code is:
<a id="menu-invoker" tabindex="0">Menu</a>
<nav><ul><li>First menu item</li><li>second menu item</li></ul></nav>
<p>Some other link</p>
#menu-invoker:focus ~ nav {display: block;}
nav {display:none;}
ul:focus, ul:active, ul:hover {display: block;}
or see the fiddle: http://jsfiddle.net/YNxVs/1/
Any solutions? What's the simplest way to achieve this?
Jonathan
The problem is that #menu-invoker no longer has :focus. One solution might be to position: absolute; the nav, so it floats on top of the other content. That way the scroll-height will never change.
(the links outside the menu work in Firefox, but not in IE or Webkit. Not sure which is doing it "wrong")