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!
Related
I noticed a problem with the behavior of the main menu on mobile devices when I’m using Voluto theme.
When more than one sub-menu appears on the main menu, no matter which drop-down is clicked. Only the first submenu (expandable element) always develops.The first submenu ("Przewodnik") is always working. But, when you're trying to expand second submenu ("Zagrozenie pozarowe"), expanding the first one.
This makes it impossible to have several sub-menus on the page. I don’t know how to fix this, and the size of the menu without drop-down lists keeps growing.
Help please!
Site with problem, Video with the problem
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
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.
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/
We recently migrated our website from Sharepoint to Wordpress with HTML5 Blank theme.
We are trying to figure out how to edit the appearance of sub-menus and their parent menus. Primarily when customizing and editing menus they show up justified right, but published on the page they justify left, and also longer words spill over to the left instead of the right. Please see screenshot below.
Where can we find the edit options to offset submenus and their subsequent menus justify and shift/spill over?
Screenshot of menus being edited
Screenshot of menus published on homepage
The screenshot of your menu's being edited is the way it is displayed in the backend of all WordPress websites. It has not hing to do with the way the menu is rendered in the frontend.
To change the appearance of your menu, you will have to write some custom css. The parent list items will have to be relatively positioned, the child list items will have to be absolutely positioned.