Disable dropdown menu

Hi,

I am using the Newsanchor theme for my new website and I wanted a horizontal fixed submenu instead of the dropdown menu.

How can I disable the dropdown function?

Thanks in advance.

All the best

Does it have to do with a Jquery function?

I started to study Bootstrap in order to read the code better and try to modify it correctly…

In the meantime if someone knows what to do, I’d appreciate a hand :slight_smile:

All the best

Hi there,

Can you share your site URL here?

Regards,
Awan

Hi Awan,

So nice to receive your answer, thank you…

Here is a link to the project I’m working on : http://0767ab92.ngrok.io/

It s a link generated by Local by Flywheel.

I actually would like my menu to be like this :

Horizontal main menu and dynamic submenu underneath whose elements change according to the main menu item.

The colors of the image don’t matter at all… it’s just to that I want to get rid of the dropdown effect…

Thank you so much in advance.

François

Hi,

I see, please try the CSS code below, you can put this CSS code into Customize > additional CSS

@media only screen and (min-width: 1024px){
	.page-content {
		margin-top: 45px;
		border-top: 1px solid;
	}

	#mainnav .sub-menu {
		box-shadow: none !important;
	}
	#mainnav ul li {
		position: static;
	}
}

Regards,
Awan

Hi Awan,

First of all, thank you for your time and help !

It’s getting a lot better, thanks. But there are still some “problems”.

The submenu is still not permanently fixed. It appears only on main menu item hover.

Then the submenu items are not centered within the row but aligned left.

Thank you very much in advance.

All the best

Hi,

So you want the submenu to always displayed? How if the main menu doesn’t have a submenu? what will be displayed on the row?

Btw, can you fix your site URL? I can’t access it.

Regards,
Awan

Hi Awan,

Exactly… and centered would be great too.

I made a test with no submenu items… the row stays empty.

Here is a new link : http://be68247d.ngrok.io/

Thanks Awan

Hi,

The URL still not accessible.

Please try this to centering the submenus:

#mainnav ul li:hover > .sub-menu {
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
}
#mainnav ul li:hover > .sub-menu li {
    display: inline-block;
    float: none;
}

Regards,
Awan

1 Like

Hey Awan,

That’s weird, my Local By Flywheel remained running. I am gonna leave the computer open tonight, it might come from the fact it was hibernating. Sorry about that.

You did it… the submenu is now centered. The transition is still too quick on the hover. I let you check.

However, I don’t think it’s possible to get the submenu items remain fixed only with the hover on the “ul li”.

I need Jquery to make it appear fixed on the on click event, right?

And I don’t think you can help me any further with this, can’t you?

Regards

Hi,

Here is to remove the hover transition effect:

#mainnav .sub-menu {
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-o-transform: none !important;
	transform: none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

What would it do when the main menu item clicked?

1 Like

Hello Awan,
Thanks a lot, the transition effect is gone, I think it’s way cleaner this way.
However, the submenu doesn’t stay fixed, it disapears when the mouse goes off of one main item.
Do you think it’s possible to keep the submenu visible when a main item has been clicked with css?
Could you try with this URL now please? http://5a09caeb.ngrok.io/
Thanks again for your help.

Always displaying the submenu when the main menu is clicked. Okay, then please try this javascript code, you can put the code below using custom Javascript plugin:

jQuery('li.menu-item-has-children').click(function(){
	jQuery(this).siblings().removeClass('active')
	jQuery(this).toggleClass('active')
})

Also, please reset/replace all of the custom CSS code in above with this:

/* horizontal main-submenu */
@media only screen and (min-width: 1024px){
	.page-content {
		margin-top: 45px;
		border-top: 1px solid;
	}

	#mainnav .sub-menu {
		box-shadow: none !important;
	}
	#mainnav ul li {
		position: static;
	}
}

#mainnav ul li:hover > .sub-menu, 
#mainnav ul li.active > .sub-menu {
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

#mainnav ul li:hover > .sub-menu li, 
#mainnav ul li.active .sub-menu  li{
    display: inline-block;
    float: none;
}

#mainnav ul li.active .sub-menu{
    opacity: 1 !important;
    visibility: visible !important;
}


/* remove default transition effect of the submenu */
#mainnav .sub-menu {
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-o-transform: none !important;
	transform: none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}


/* keep the changes color of the main menu when its clicked */
#mainnav ul .top-menu-item-2:hover, #mainnav ul .top-menu-item-2.active {
	background-color: #fe2d18;
}

#mainnav ul .top-menu-item-3:hover, #mainnav ul .top-menu-item-3.active {
	background-color: #91ce29;
}

#mainnav ul .top-menu-item-4:hover, #mainnav ul .top-menu-item-4.active {
	background-color: #ff9600;
}

#mainnav ul .top-menu-item-5:hover, #mainnav ul .top-menu-item-5.active {
	background-color: #b22234;
}

#mainnav ul .top-menu-item-0:hover, #mainnav ul .top-menu-item-0.active {
	background-color: #c71c77;
}

#mainnav ul .top-menu-item-1:hover, #mainnav ul .top-menu-item-1.active {
	background-color: #16a1e7;
}

1 Like

Hello Awan,

Hope you are fine and not too bored with me asking.

I tried your code but there is nothing new except the border underneath the menu :slight_smile:

I replaced all the code in my .css though. I double checked but it looks like it’s ok. Maybe you wanna be sure and check yourself with this as I don’t know if you can access the URL I gave you.

https://jsfiddle.net/5bpcovhv/#&togetherjs=ThvRHMkI8s

I never used Custom Javascript and I don’t know about JQuery but I don’t see any " ; " in your code. Is that normal?

Then, isn’t there a " > " missing after li.active :

The same here :

Anyway, I tried with and without and nothing changes.

I think it’s almost done but something prevents the code from acting right.

All the best

Hi,

Of course not, I am happy if I can help someone else :slight_smile:

Yeah, it’s okay if you keep the new line for each code. The ; mean is to separate each code with another code. In Javascript, you can separate each code just using new line without ;

Please visit this page for better explanations https://www.w3schools.com/cssref/css_selectors.asp :smiley:

Please let me know if you still have an issue.
And feel free to open new topic if you have another issue.

Regards,
Awan

Ok :slight_smile: Nice to read that :slight_smile:

Sorry I did not want to try to correct you but I was searching where the error could come from as the Jquery was not working. I assumed you might have forgot about a " ; " or a " > "… :smile: )

Well, I checked again and respected your code 100% but I doesn’t work. Do you think it should be copied in the child theme files instead of using custom Javascript plugin? If so, in what file should I put that function code?

But was it actually working when you tested it on your side?

Thanks Awan

This is still the same link active by the way : http://5a09caeb.ngrok.io/

Hmm, it’s bit strange. I do test it first on my localhost before I post it in here and the code is working as well.

Did you mind if I try to do the trick in your site directly? If it’s okay, then I need to know the login access to your site, you can send it via private message then.

Btw, your site is not accessible. It only displays Tunnel not found

No I don’t mind at all… but the thing is my site is not online yet…

I am using the Local by flywheel and it seems that their live link system is not working properly.

What about is I send you the files of my child theme? It’s only 850ko… ?

Let me know what you prefer?

Thanks Awan

Hmm, I think its better if I can try on your site directly.
Let me know when you make the site online.