Wordpress HMTL5 Blank Theme- How to change submenu attributes/justification - wordpress

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.

Related

WordPress Block Theme Navigation remove submenu on hover

I am working on a WordPress Block Theme (FCE) and want a vertical navigation on the left side.
When I add the Navigation Block vertical it is still opening the submenu while the mouse hover. The submenu shouldn't open when hover. I prefer it always open. How can I stop this menu hover?
I went back to Classic Theme. As multiple things like this are not yet possible in full FCE Block Themes and they are still in Beta.

Z-index on dropdown menu item

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

Sticky menu while scrolled WordPress

I want to display the menu hanging while the top advertisment section and logo section is scrolled down and it must be sticked on the top. I am customizing the theme. In the theme there is no such property but I want it on my site.
I have tried using jQuery syntax but didn't work out.

Wordpress - Top navigation menu issues

I'm working on a wordpress page and I have a problem with the top navigation menu. If you check my screenshot in the link, you can see a big white area under the top menu, which should not be there. It's as if the top menu extends all the way down there.
Naturally, if I remove the top navigation menu the white spice disappears, confirming this has something to do with that very menu.
I'm not well versed in wordpress. So I don't know exactly what files, code or setting I should check.
Any ideas?

Revolution Slider (Wordpress) Hiding Dropdown Menu (Superfish)

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!

Resources