Creating a menu in WordPress. Instead of making the drop down menu to be vertical, I want the drop down menu to be horizontal.
See this website for an example. Hover over OUR SECTORS to see the menu. The menu I want doesn't have to be full width on the screen.
Couldn't find any solutions for this yet. Only found solutions for multiple menu columns, like done with the Max Mega Menu. I don't want to have multiple columns, but just a horizontal menu.
Is there any CSS or plugin available for this?
Edit: Website of the theme with the same menu here
I would give the <ul> a style of display: flex. Then you can move around the flex items with justify-content.
You can read this article for more information about flexbox.
Sorry, it is really hard to help you without any examples.
Related
ETA: I was brought in to help with one little bit of this site. I am not the designer, so I had to ask permission to share the site and get a staging site set up. I can now provide the link....
https://staging3.childsfirststeps.com/
I have stripped all the z-index/overflow instances I had been working with so it's a relatively clean slate.
In a nutshell, I need the Home page slider frame to overlap the nav items as per the image attached below. ON the other pages, I need the page header (title bar) to overlap the nav items. All this, while preserving the dropdown menu.
A client has requested (despite all objections on our part) to do this nav design based on a static design (image) she found somewhere. I thought it was technically doable so I set out to recreate it. I managed to figure it out but ran into a snag when a dropdown menu item was added: the z-index on the dropdown item is not behaving.
I have positioned all related items and stacked the z-index as I would expect. Everything works properly except the dropdpown menu items which currently sit behind the page header.
The menu items are all transformed (rotated) and translate on hover. The page header (title bar) needs to be stacked higher than the nav to cover the bottom bits of the rotated menu items.
The HTML is of course rather convoluted as the site designer is using WordPress and Elementor so moving containers around is not possible.
I have tried every z-index and overflow setting on everything I can think of.
Is this design achievable with a dropdown menu item?
main nav image
I would like to set up a horizontal navbar to scroll inside the page in the style of uber eats (https://www.ubereats.com/en-EN/new-york/food-delivery/zafis-luncheonette-les/-VDewOpIRMe4mh2tNVzVCw/ ,check the second navbar in which you can navigate throught the different categories of the menu). I managed to create the navbar and set the spyscroll but I don't know how to reproduce the responsive behaviour : how to hide the category from the navbar when it overflow and add it to the "More..." dropdown ?
I hope my question was clear enought !
Thanks for your help
What You are looking for is called a "Priority Navigation". Just Google it, there are plenty of examples and plugins out there.
e.g. https://css-tricks.com/the-priority-navigation-pattern/ or http://gijsroge.github.io/priority-nav.js/
I'm currently coding a theme that calls for a revolution slider at the top of the page and I also need a dropdown menu system.
I'm trying to use Superfish and that works fine but when you hover to see the dropdown menu items, they show up underneath my slider.
I've tried playing around with z-index (including adding position: relative) but I just cannot get this to work. I've tried adding z-index of a ridiculous amount to the header, the menu, the list items basically everything I could but there must be something I'm missing.
I've found a few answers by Googling but it always suggests z-index.
The site can be found at:
http://clients.benpalmer.me/medina/introduction-to-south-arabian-civilization/#sidr-main
The dropdown menu should show up over the slider and is under the 'Inscriptions' menu item.
Any help would be massively appreciated!
I am just developing a child theme of WordPress twenty eleven theme. The live demo can be seen here. As WordPress has already responsive support I am also doing my theme in responsive for that I am customizing my theme CSS. For some of the part I am done. In my menu part I am facing some problems. I have two types of menus. One which doesn't have dropdowns and the others which have dropdowns. Now I am facing the problem in the menus which have dropdowns in responsive. So can someone kindly help me here?
This seems like more of a design issue than a technical one. I would recommend either 1) turning the drop down menus into accordion menus (e.g., tiny accordion), or 2) extending the drop down menu region and increasing its z-index so that you can only hover over the drop down and not activate anything that appears underneath it. For your design, this might mean increasing the z-index and using something like margin-top: -2px; on the drop down menu's children.
The idea of responsive design, however, is that you make it available for small devices, like smart phones. Since smart phones that use touch don't have hover states, you're probably better offer using suggestion 1 above, where a user clicks on the initial menu, which then displays its sub-menu.
I am trying to align the text in sub-menu items to the right rather than the left in a Superfish menu.
I was able to align the drop-down to the right side of the top level menu item but cannot seem to figure out the text alignment.
Also, how would I go about having further children menus open to the left rather than the right? Since the nav bar is located to the right in the design, I do not want menu items opening outside the confines of the content box (to the right).
Any help would be greatly appreciated. Thanks!
EDIT - I removed the demo link because I decided to go another route, Superfish was making me want to rip my hair out. But it would still be nice to know if there is a way to accomplish this.
Im not sure if this is possible, Ive heard a few people try it.
I hear this page mate provide some help:
link