I am trying to get my mega menu on top of the carousel but it hides behind it. I don't know how to make it show on top.This is before adding carousel. This is after adding carousel from bootstrap. Mega Menu css. Mega menu Hover.
Please help.
I tried to see overflow and z-index and tried both of them. I don't know if i am doing it right or not. I want my mega menu to show up on top of the carousel.
A possible solution is to set the mega menu to position absolute, then set its z-index to +1. This will set the entire bar above out of the stack and move it above the carousel.
The other option is to move the mega menu data higher in the HTML page to give it higher priority. It would help to see the rest of the source code from the HTML index. Tell me how it goes!
My Problem is solved as i have given "z-index:5;" to all the "li" and "ul" element in the navbar. Now it is working.
Related
I am using the Avada theme and cannot figure out how to get the logo in front of the menu or header. It looks like the logo is part of the wrapper that contains the header, menu and logo. So if I change one, it affects the other.
This is how the theme has the logo set up -
https://imgur.com/NQN5ukO
This is the desired style -
https://imgur.com/EEOavLI
Thank you if anyone can help. :3
Wouldn't this be associated to z-index? As in, apply a z-index value to the navigation div the logo is sitting on and apply another z-index attribute with a higher value to the logo div? I think as long as the logo is position:absolute, position:relative, or position:fixed you should be good.
Here:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a project and I need a multi level menu which will be dynamic, but for now I want it hardcoded (html / jquery / javascript / anything that will work).
The first level will be some icons which will be place horizontally. And when I click on any icon the second level will appear, which will have a sub menu (child elements) and the third level will have some children elements too.
The structure will be like this:
Icon1
FirstMenu
SecondMenu
ThirdMenu
FirstMenu
SecondMenu
Icon2
FirstMenu
SecondMenu
ThirdMenu
FirstMenu
SecondMenu
Icon3
FirstMenu.
I was able to create a sublevel menu, but I can't figure it out how to put those icons in it, and on click to show me the children of it.
The menu should be like this. When I click on a icon, the right menu from the bottom should collapse. And when I click on HEAVY DUTY for example, a third level should appear.
Can you give me some hints or resources from where I can start ?
Thank you very much in advance!
Try this. you can add fontawesome for the icons. Js Fiddle p9Lea8g4/7/
The navigation menu for the Wordpress site that I am working on seems to display properly and when mouse is hovered over individual menu items, hover states do appear as well as the drop down menus (where applicable). The issue that I am having is that none of the navigation menu items are clickable (even the drop downs). It's a simple one-fourth/three-fourth header setup. Nothing fancy. All other links throughout the body of the site are clickable.
Looking at the code I did not see any DIV laying on top of the menu (hovers and drop downs wouldn't fire if there was). I went thru the CSS and nothing jumped out at me. I tried changing nearby DIVs to display:none to see if I could find a culprit...nothing. There are only two plugins running All-In-One-SEO & Formidable Forms.
The site can be found at http://www.bigfootpw.com.php56-1.dfw3-1.websitetestlink.com/
Thanks in advance for any help you can offer.
Problem with your JavaScript. Mostly the problem will be on http://www.bigfootpw.com.php56-1.dfw3-1.websitetestlink.com/wp-content/themes/striking_r/js/custom.combine.js. Try turing off the JavaScript in your browser it will works.
I can't able to dig deeply on to this script.
I would like to centralise logo between menu item in Wordpress dt the7 theme, is there any solution to solve this problem? Because currently the menu was using build in layout which is logo at the top and menu item at below.
I can't telling you exactly without seeing the problem, but you probably have to play with the line-height css property.
If you give us a clear example we will be able to help you more.
I am looking to edit the css styles from inside the Dashboard inside of wordpress and NOT have to edit the php files if possible.
I know it is possible to edit at least some of the properties so my hope is I can edit all of them right within the dashboard.
MORE SPECIFICALLY
How can I change the css states of links and submenus of a custom class? For example the a:active, a:hover, a:link etc... and ALL OF THE SUB-MENUS to custom css as well?
I have included these pictures to show you what I am trying to do and the present results.
MY CUSTOM MENU INSIDE OF WORDPRESS
CUSTOM CSS INSIDE OF WORDPRESS
THE RESULTS
I am taking the time to give a little more details in gratitude for all the help I got on stackoverflow over the years, also giving a little more info for the newbies out there. We are all learning.
Here is what worked in pictures
I used Firefox and used "INSPECT ELEMENT". While on the page I did a LEFT CLICK and from drop down I chose INSPECT ELEMENT.
Then I clicked on the PICK AN ELEMENT icon, as seen in the picture and then I hovered over the element I wanted to edit, in this case a button in the menu. This gave me the class I needed to edit.
I went into my DASHBOARD in WordPress and made this change to the code. Finally I got the results I was looking for, which I also included in the same picture as well.
Although I have not figured out how to edit the sub-menus yet I believe I am on the right track and will figure it out.
HOPE THIS HELPS SOMEONE. :)