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/
Related
Still pretty new to css and I need a hand.
I have this site: https://nuebar.com/ and it has drop downs under hair, about etc…
I need to get the dropdowns aligning to the right edge of the menu item instead of the left.
Dropdowns are currently absolutely positioned but I'm unable to use this to get them aligned how I want them to be.
Would love some insight on this
Dropdown menu css add for right:0; and parent li css add postion:relative; Below mentioned css code add and check.
.DropdownMenu{right:0;}
.HorizontalList__Item{position:relative;}
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 am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
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!
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 :)