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!
Related
I have a horizontal navigation menu that breaks upon browser window resize as illustrated here:
https://jsfiddle.net/7oLjwh90/2/
Now the culprit here is:
#adminNav ul li { float: left;
But as soon as i remove float and do display: inline-block for example the dropdown stop working. It becomes a pure mess.
Tried setting display to inline-block and also recreated a new simple horizontal menu and that behaves as expected but cant get this dropdown to work without float.
https://jsfiddle.net/7oLjwh90/2/
Same menu as on https://jsfiddle.net/7oLjwh90/2/ but it doesnt break upon browser window resize. The list items should not stack on top of each other.
Not sure what exactly you wish to achieve. If removing the float property is your problem, you can try using flexbox(here is some good information on the matter -https://www.w3schools.com/css/css3_flexbox.asp). If this doesn't work for you, specify your question further. Hope this is useful.
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.
I'm work on this website and am trying to add drop down functionality. The theme is David Airey and I'm using the drop down functionality from twentyten. Pasted the CSS from twenty ten into the menu.css in David Airey, but when you hover over "Broadcast" (the only one utilizing drop down), the box appears in the top left. Checked everything thrice, but can't find where it's screwing up, an extra set of eyes could probably help.
Thanks!
Add position: relative to the <li> that contains the submenu.
You need to add position: relative to .nav li.
This will make the submenu be absolutely positioned relative to the li, instead of the window.
A diagram is here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I have menu that is implemented with html and css.
On mouseover of main menu, I have to show all submenus in one place.
Here is an example click here jsfiddle
For this, the submenus alignement is not proper.
According to the example, Test 5 has to come under Test 2 but, it's showing blank space.
How can I align this properly?
Note:: The Submenu items will be dynamic, they may grow or shrink.
Unfortunately, it is not possible with your current markup: if Test5 had to go below Test2, then how would you automatically tell it not to go below Test1? What should the rule be? There's no obvious answer to your question: if you need elements of different size to layout in a space efficient manner, without too much blank space, etc, you could write some kind of layout manager with jQuery that will structure and re-position your menus according to their content.
The problem is your submenus are floating left and Test 5 is getting hung up on Test 3 because it is longer than Test 4.
You can test this by adding a CSS rule to set the submenus to have the same height.
ul .sub.sub10 ul{
height:180px;
}
Link to updated jFiddle
Stack,
I'm having difficulty creating a good drop down navigation menu using only css. The menu is simple, it needs to only have a few things in it, and only needs to drop down (no need to go down and over etc).
The menu is somewhat working, but whenever I hover over it to drop it down, the menu gets overlapped by the wrapper div directly below the header div where the menu is located. I've tried setting the z-index of the drop down menu to like 20000 and it is still being overlapped.
Here is a direct link to the test page I am working on:
http://www.lolbrary.com/workspace/dropdownheader.php
Any ideas?
Thanky,
billmalarky
In #fullheaderbar and #profilemenu you need to remove overflow:hidden; and in .profile-menu ul you need to change position:relative to position:absolute;
then tweak from there :)