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;}
Related
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.
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 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 am modifying a css3 nav that i found in a tutorial and I am having trouble with the z-indexing.
Please check out the nav here:
http://cafemeetup.com/testArea/nav/
If you rollover either of the 2 nav items, you can see that the z-indexing of the drop down box is higher than the link that spawned it.
This is not true as I have made the z-index of the rollover box lower in the stacking order.
What I am trying to achieve is to have the drop down box fall underneath the link so the the drop shadow of the drop down box is not visible on top. I want the link and drop down box to meld into one and I think by making the link sit on top of the drop down box, I can achieve this.
It is done here at Shopify:
http://www.shopify.com/ (rollover 'resources')
Anyway, hope someone can shed light on this.
I am assuming that the problem lies in the fact that the object I am trying to add z-indexes to are hovers and also that they are not regular divs as such.
Anyway, thank you for at least reading all this. I appreciate your time,
James
I made a demo for you on jsFiddle. Try moving your background and z-index style to the .drop link instead of the list item in your code and it should work.
http://jsfiddle.net/sTsrb/
You are applying your z-index:999 to the <li class="menu_right"> and then applying z-index:1 to the <div class="dropdown_1column align_right"> child element. If you want it to appear underneath the <li>, make it a sibling, not a child.
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 :)