i implemented a dropdown submenu under my mainmenu on my homepage
If you call the main-website and move with the mouse over the "product" menu item, youll see the dropdown.
http://led-werbeanzeige.de/index.html
Why is the menu not fluent, and shows up so many pixels below the original main menu?
Best regards and thanks for your help
Erik.
ad a rule to your css : .menu ul {top : 20px;};
your code isn't working because your rule $header ul applies for ul that contains options(product, service..) and ul that has products (the one that is the drop-down menu)
Related
I am using the Neve theme to build a custom WP theme. It is a one-pager.
So all nav links in the menu are custom links, linking to a section within the home page.
I first tried to make them relative links e.g. #service but then the mobile menu would not close after clicking them. After reading a bit online I found the solution to make them aboslute links e.g.
mydomain.com/#service
Now my mobile menu does close but all nav items are marked as active having this class
'current-menu-item current_page_item menu-item-home'
How do I find a workaround or what is in general the best way to handle this to only have the Home link active and not the rest?
Thanks in advance.
-Gerd
First of all thanks to Nico for pointing me in the right direction.
I wanted to post this here in a little more detail for everyone, who might have a similar issue.
I cleared all the formatting from the WP class that was assigned to all navigation link.
I created my own active class, called 'my-active'
I wrote the following jQuery code to add it when a nav item is clicked and take it away from the previos nav item (this might not be ideal code, since I am not a professional coder, but it works):
(function ($) {
$(document).ready(function () {
$('nav ul li:nth-child(1) a').addClass('my-active');
$('nav ul li a').on('click', function(){
$('nav ul li a').removeClass('my-active');
$(this).addClass('my-active');
});
});
})(jQuery);
I have CSS(HTML) horizontal menu and everything is working properly, but when i touch with the mouse one of the menu "listing" is appear, but i want to make it clickable.
I try almost everything in this row:
.main-nav-ul li:hover ul {
display: block;
}
But without success...
I`m using Joomla and custom HTML CSS Javascript module.
I use this code:
https://github.com/shahbokhari/webdev/blob/master/Vertical-Drop-Down-Navigation-2015%202/vertical-drop-down-navigation-using-html-css-2015.html
I want when i click on ЧАСТИ ЗА LED ТАБЕЛИ to be able to see sub menus in this category.
With css you can only handle hover(mouse enter and mouse out). to handle click you should use javascript:
$('.main-nav-ul li').click((e)=>{
$(e.target).closest('li').toggleClass('toggled');
});
it will toggle (add/remove) toggled class of li element, when it's clicked.
then you should replace li:hover to li.toggled in css , to apply toggled styles when li has toggled class.
you can see this in codepen
While trying to make a social bar side-menu I added a hover effect when if hovered the list item would pop out to the left. But for some reason when hovering any list item every other pops out also. I was searching for a solution but sadly didn't find the answer to this problem.
Codepen
you have 2 solutions :
Apply the hover property for the link instead of the li item.
Build a css class for width & margin-left and use jQuery to load it once li item is hovered.
I've made a fast jQuery function :
$('.social-nav-item').hover(function(){
$(this).addClass("link_hovered");
});
https://codepen.io/anon/pen/QoNXZL
Pure CSS to li item :
.social-nav-item:hover{
width:200px !important;
margin-left:-150px;
}
First of all, my site is vitasino.com so that you can do these steps together with me and find out why I am an idiot
Ok, according to
weeblytricks.weebly.com/how-to-make-a-parent-menu-item-non-clickable.html
I am supposed to first right click on your navigation, click "Inspect Element", and find the div that highlights your entire navigation menu.
Did that and found that the div id is "topnav"
Now, step two is editing the CSS and add the code
/* Deactivated Menu Links
--------------------------------------------------------------------------------*/
."div name" .wsite-nav-4 a {pointer-events: none;}
So I did that and the the parents I want to be unclickable are "Services", "Wholesale markets", "Manufcaturing" and "more". In other words it should be menu items 2,3,4,7 right? So I add the code:
/* Deactivated Menu Links
--------------------------------------------------------------------------------*/
.topnav .wsite-nav-2 a, .wsite-nav-3 a, .wsite-nav-4 a, .wsite-nav-7 a {pointer-events: none;}
Should be correct, right? WRONG!
Services are still clickable, Wholesale markets are still clickable, but manufcaturing and fairs are working (althought I dont want fairs to be unclickable.)
What is wrong?
Why is that when i hover my mouse pointer to the a link the hand wont show up
the hand is the one that click the link for it show up when you hover on the list but mine wont.
the first line of the list the hand show up for the whole area but the other list just the half of the area.
Here is my fiddle : http://jsfiddle.net/TBEnf/5/
Working fiddle: http://jsfiddle.net/TBEnf/7/
.UploadPicture ul li a should have display:block;