I am working to convert a site to a completely new theme in Wordpress. The original site is here:
Original
The new dev site is here:
Dev site
What I am trying to do is make the menu match as closely as possible to the original site. I am fairly intermediate on CSS so I have the following questions:
How can I make the sub-menu text left align with the parent menu text?
How can I get that pointer to point at the parent menu?
Please note that I am using a plugin called Max Mega Menu for the dev site.
Max Mega Menu includes a location to add custom styling. There is an example at their site:
Max Mega Menu Styling Example
You need two things to achieve sub-menu like in selier.com.
First, you create an empty div which will appear on parent menu hover, and which will have width of 100%. This div will be your semi-transparent background.
Then, for each sub-menu you create, set its background to none, limit its width to some value, and set its position property to absolute.
Also, make sure that the sub-menu shows on top of the background div.
This should do it.
It will be better not to use any plugin and used the custom html menu to get the exact menu like in the demo.
Related
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
I want to implement a full page width mega menu inside a responsive "container" div.
Bootply example
I want to use a responsive container, but have the menu reach out to the edges of the window. I.e. it needs to expand outside of the parent element and not being limited by the container.
I've tried to use Yamm!3, but it seems to do the same thing as my example, which doesn't work. I know this whole thing kinda breaks the laws of CSS, but I was thinking that there might be some clever work around out there...
I found the answer. I needed to add position static to the dropdown and the next parent div. And then move down the dropdown-menu to make it appear below the menu.
Working example
you just add more style below:
.dropdown, .dropup{position:static}
I'm trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
I've created menu drop down menu in pure css,
here, parent div have position:relative and the menu popup have position:absolute,
when the menu hovered the submenu will appear as display:block,
but here, hovering sarees (first menu) the popup menu appears perfectly, but hovering the last menu webmenus, the popup appers at wrong position (different position). The images uploaded below
I want to make the same position with all submenu popups like sarees's submenu popup have.
is there any css hack for this .. ?
Images :
I want this position for all menus
The menu Displaying at wrong position
I noticed that you are using position: relative to the menus, including the drop down menus. That is the why you are having this issue. You set the menu as absolute and it is understood as relatively to its respective parent. If you remove the position: relative it will set absolute position relatively to the page.
Update:
See a Fiddle HERE
and compare to this another Fiddle HERE
Did you see the difference?
Sorry if my english is bad
Remove position:relative; to each .menuTemplate1 li
That way the menu will open always on the left side, as your image shows.
The site I'm working on uses the modified WordPress TwentyTwelve theme. The standard drop-down menu of that theme has been modified to push the content down when the submenu opens:
Problem: I want to arrange the sub-menus neatly along the entire width of the content area (960px wide), rather than having them drop down under each other. If the number of submenu items is large, I want the submenu to wrap over several lines, but have the items arranged in neat vertical rows.
Here's how I see it. Currently your sub menus are constrained to its parent menu. To achieve what you want, I think you'd need to do quite a lot of restructuring. I would keep your sub menus separate and place them directly underneath your main menu. You can code your sub menu items to take up the 960px width (by hand I know, even though you're using wordpress), and if needs be set the longer sub menu into two lines. Give each sub menu a unique id and set them to display:none in css. Your main menus li's already have unique identifiers so then you can create css rules for the specific li's. Something like this:
#menu-item-58:hover + #submenu1 {display:block;}
#submenu1 {display:none;}
#submenu1:hover{display:block;} //so submenu doesn't disappear when mouse hovers over.
Here is an example where you can see in action, I've used div's but you can change it accordingly: http://jsfiddle.net/H3WB6/