Hi guys and Happy New Year!
I am having some trouble with the CSS of the navigation menu submenu items on my WordPress website.
As you can see in the screenshot, the sub-submenu is displayed one line further down than it should be, making it nearly impossible for the user to use it.
The website is live on here and I'm struggling to find what is wrong with the CSS. Everything seems fine.
Can anyone help me out? What should I add/change to ensure that the 3rd level menu items appear in the correct place?
Thank you very much in advance for your help and time!
Remove top 100% from the below CSS class, then list items will be aligned properly.
`.menu>li.menu-item-has-children:hover ul {
visibility: visible;
opacity: 1;
/* top: 100%; */
z-index: 999;
}`
The following code solved it:
#media (min-width: 768px) {
.menu>li.menu-item-has-children ul li > ul {
top: -1px !important;
}
}
Related
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I have a strange issue on a website I am trying to customize.
When I activate the Avada theme, the menu items in the navigation disappear, but I can hover over them. Also the social icons in the nav are not visible and no matter what options I select in Theme Options > Menu > Menu Options, they do not apply at all.
What I have tried until now:
Deactivated/Activated all the plugins
Deleted the demo content, reinstalled the theme. Still no result.
I took down the coming soon page. Here's a link to the website http://www.tipografiamarian.ro/ if you'd like to take a look. As you can see. while the page is loading, the navigation is visible for a second or so, then the elements in it disappear...
Has anyone else encountered this issue before?
Please help, thank you! :)
It's showing line-height:83; (instead of 83% or 83px etc) which is causing the issue. If this is from an external javascript, you can use following snippet to override this:
.fusion-main-menu > ul > li > a {
line-height: 83px !important;
}
I would suggest checking/editing your javascript for this.
when you check your code, some javascript runs, after page load
for your anchor tag, line-height:83; is addded, which means, line-height is 83 times of your font-size.
<span class="menu-text">Home</span>
add an unit to line-height value - 83px
.fusion-menu>.menu-item>a {line-height:83px;} // you can !important if you don't want to fix it via javascript/jquery
You have line-height:83px for the links. Just set a smaller value (you have a single row, so it can be what you want).
.fusion-main-menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.fusion-main-menu > ul > li > a {
height: 33px;
line-height: 33px;
margin: 20px 0;
}
I suggest you not adding style for menu from admin.
Add this and you are good to go
jQuery('.fusion-main-menu > ul > li > a').css('line-height','83px');
I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.
Here's a link: http://www.officialjerky.com/faq-1/
While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?
There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.
Any guidance or input is really helpful. Thanks.
It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:
.subnav {display: none !important;}
Ideally, remove the script that is causing the behavior.
Regarding the + on small screens, on line 9865 of the stylesheet there is this:
#sidecarNav .folder label:before {
content: '+';
padding-right: .25em;
width: .75em;
display: inline-block;
}
You could either remove that code, or just add this to the stylesheet:
#sidecarNav .folder label:before {
display:none !important;
}
I'm having problems with where to place the right z-index css code.
My dropdown menu is not on top of all the content as you can see here: http://bit.ly/18j63r4
I've tried to add the z-index code everywhere but it just doesn't seem to work for me.
Hope you can help me out!
(I can't access all the css code as I'm using a ecommerce standard platform. The z index code needs to be placed somewhere in the .dropdown or .kolommen css code.
Thanks in advance)
Removing the existing z-index from
#filterContainer .nav {
}
Makes it work...
It's also worth nothing that z-index will only work on positioned elements
'#header_2_inner' for this element add property
{position: relative;
z-index: 9999;}
it will help you
or for
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 999;
}
add z-index:2
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 2;
}
You've got z-index:999 on your <div class="nav"> inside <div class="product" id="filterContainer">. Simply remove it and drop down menu will be shown on top of it.
Edit:
Since you can't access all of the code (maybe you can override it in you css ?) it is hard to help you. If you can, set z-index:1000 to #header-modules .h-left {
z-index: 1000;
}
http://cargocollective.com/joingateillustration
Hi everyone, this is my site I am developing and I have managed to add my twitter feed to my page however I cant add a line break before each tweet, Ive searched here and people have posted answers to a similar post but this doesnt seem to affect mine, can anyone help?
You could add a top margin to your tweet list items:
#twitter_update_list li {
list-style: none outside none;
width: 150px;
margin-top: 10px;
}
Something like this?
#twitter_update_list li span
{
padding-top:10px;
}