I am having a big issue with a website - I really hope you can help me out.
https://www.hillcrestatc.com/mood-disorders/
There is a main menu and submenu showing on such a page.
When one hovers over the main menu on this page and then tries to select a suboption, the dropdown disappears and acts as if they want something from the secondary menu.
Any idea why this is happening and how to fix it?
Thank you!
I tried your website on vivaldi (chromium) and it shows that the sub menus of the first top menu can't be reached. I used the debugger, toyed around and found the solution: z-indexes
The thing is the secondary menu has a z-index:1 !important and the top one doesn't, so it gets kind of mixed (sorry I can't really "explain" it clearly).
Here are two lines of code you can try in your css, and also try to remove this one while you're at it, otherwise it won't work:
At line 33:
.fusion-secondary-main-menu {
background-color: transparent!important;
z-index: 1!important; /*delete this line here*/
}
Add these two lines:
.fusion-header{position:relative;z-index:1;}
.fusion-secondary-main-menu{position:relative;z-index:0;}
Let me know if this helps!
Related
I've been trying to figure this out all day but have reached my code knowledge limit as I try to change the child theme to achieve this.
Here's an image showing what my site currently displays, next to an image of the desired result.
What I have VS What I want
I've tried using a few snippets of code I've found on the Stack Exchange that remove Woocommerce descriptions but with no luck. I'd like to remove the gap, the description title, but must keep the description box itself because that's what allows the tabs at the bottom of the page.
Here's a link to the page itself, I can find and isolate the gap and fix it using the html, but I've no idea how that relates to the CSS (I'm new to this) Link : https://folduptoys.com/product/space-garden-playset/
Here's how it's currently set up, I'm using the Salient theme, with the 'Product Tab Position' set to 'Fullwidth Under Images'.
Any help would be really appreciated. Thank you x
-Alex
Here's what will work but it's important to note that if other tabs show up, like 'Attributes' or 'Dimensions' that they'll be visible, but the `Description' tab won't be. So you'll have to consider whether you want it to work that way or not.
There's two things going on, first, the margins on the tab menu were big. 70px on top and 50px on the bottom. Seems too large in my opinion but I long ago gave up guessing on why Salient's devs do anything.
The second thing is to hide the 'Description' tab. If other tabs end up being present though, they'll show up in it's place.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
margin:0 auto;
}
#tab-title-description{
display:none;
}
If what you want is to entirely remove the tabs navigation, meaning that if other tabs are there, no one will be able to see/access them, so not a good idea unless you're also modifying the tab content layout so that they all display, then use this to hid that whole bar.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
display:none;
}
We have a oddly coded sub menu that was customized so it could be in a specific column setup, however when you click a link under that sub menu, the sub menu then jumps up while the next page is loading. It looks pretty bad :P
For example when you go here: goo.gl/4mW5sW
and hover over the menu item "All discs" you can see the dropdown with the 2 customized columns.
If you click one of these links you will see the drop down than jump up while the page loads the link you clicked.
I have been combing through the css trying to locate why it jumps with an active click and am having no luck. Maybe another pare of eyes will help?
I even tried this pathetic attempt
a:active .sub-menu{display:none;}
But it didnt help
Thanks!
The problem is with the margin-top and the hover state of the ul class="sub-menu'. Find a way to select only the first column and add the next css:
margin-top: -1px!important;
Then select only the second column and add the next css:
margin-top: -1px!important;
You are giving both colums a -71px as top-margin and when hover is toggled you mess that margin for the first column, giving it a -71px of top margin.
If you provide code, i can help you further
Problem
I have a MenuItem that by default is initialized with drop shadow—which I’d rather not have. I’ve got a css file set up, but can’t seem to figure out what’s necessary to remove the drop shadow.
See how there's a rather ugly drop shadow down below that? I'd like the whole menu button to be flat, containing no borders nor shadows whatsoever.
The reason the background color of the various different elements in the image are red is due to my attempts in styling it differently—the background color does indeed work the way I’d expect it to.
What I’ve tried so far
.menu-item
{
-fx-effect: null;
-fx-drop-shadow: null;
}
Neither one of the properties seem to effect the outcome of my program.
I've also tried styling the menu, but that only appears to style the actual “Plugins” button.
Moreover
I can’t seem to think of any better solutions compared to those I’ve already tried. Perhaps someone can point me in the right direction?
Once again, I’m attempting to make the menu items look flat.
You need to add the effect to the context menu, e.g.
.menu-bar .context-menu {
-fx-effect: null;
}
BTW: There is no -fx-drop-shadow property.
I am in need of a dropdown-submenu using Bootstrap 3.
There are questions like this all over the place, one in particular that got me closer is this one: Bootstrap 3 dropdown sub menu missing
However, the answers there display the dropdown to the right of the current menu. I need to display the dropdown within the current menu, just sliding the rest of the nav down when open.
Here is a bootply with what I have so far: http://bootply.com/91787
Currently the submenu is just overlaying the current dropdown... I need the submenu to push the rest of the dropdown elements down when open. How can I achieve this? Any help getting the dropdown to activate on click instead of hover would be helpful as well, but the main question is more important.
Like this ? I´m not sure if I understood your question right.
http://bootply.com/91794
Edit:
Quite simple, I hope this is what you want:
.dropdown-menu {position: relative;}
http://bootply.com/91800
Jeff Mould solved this beautifully.
Git: https://github.com/jeffmould/multi-level-bootstrap-menu
Nav Demo: http://theboot.fenwickmedia.com/
When I have a menu item which contains a submenu, this submenu is shown inside the menu's div, screwing the css (hover over the Services tab):
http://jsfiddle.net/jYXnE/2/
There this part of the JS (that everyone seems to use) which bothers me when initializing the menubar plugin:
position: {
within: $('#frame').add(window).first()
}
Since there is no frame id anywhere in the official examples, I guess it creates a div on-the-fly?
I compared my code to some other menubar jsFiddle and I can't find the issue to it, any help would be highled appreciated.
It seems like I had forgotten to link menubar's CSS. Everything is fine now.