Need help with menu alignment

Hi Support,

I tried to update the menu on the top bar but I see that the drop down menu is bigger text and not in line with the upper menu item. Will you please help in providing the CSS code for aligning it? I need the menu to be inline with the upper item, i.e. width, font size, line height.
Also, is it possible to add an icon/picture of flag to the menu item? If you can share the CSS, I can change the URL with the correct flag.

Thanks in advance.

Attachments:

You must be logged in to view attached files.

Hello,

Which plugin do you use? WPML? If so, there is the option to show the flags on the menu. You can assign the language switcher either to a menu or create a widget. Please refer to WPML documentation https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/

Best Regards

Hi Elise,

Thanks for looking into it.

I am not using any plugin, I am using the WP menu and creating a drop down link to my other store on the top menu right that comes by default with WoodMart.

Thanks.

Hello,

Please specify what you would like to change: here is the tom menu item: https://hazesmokeshop.com

And here is the drop-down item https://prnt.sc/sun856

Best Regards

Hi Elise,

Thanks for checking on this.

I want it as per the attached snapshot.

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

#menu-top-bar-right li .sub-menu-dropdown{
max-width:89px;
}
#menu-top-bar-right li .sub-menu-dropdown a{
padding:0 10px 0 10px;
}

There is no option to insert image of the flag.

Best Regards

Hi Elise,

Thank you very much for your support on this.

I applied the code and now the box looks good, however, I can see that on hover, the grey highlight is not proper. Will you please help in fixing that as well.

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace this code in the Theme Settings > Custom CSS > Global:

#menu-top-bar-right li .sub-menu-dropdown a:hover{
padding:0 10px 0 10px;
color:green;
}

Set the color as per your needs.

Best Regards

Hi Elise,

Thanks for sharing the code. I have updated it but that grey line is still there. Given below code is on my site now.

#menu-top-bar-right li .sub-menu-dropdown{
max-width:89px;
}
#menu-top-bar-right li .sub-menu-dropdown a{
padding:0 10px 0 10px;
}
#menu-top-bar-right li .sub-menu-dropdown a:hover{
padding:0 10px 0 10px;
color:green;
}

Hello,

Please relace this code:

#menu-top-bar-right li .sub-menu-dropdown a:hover{
padding:0 10px 0 10px;
color:green;
}

with this one:

#menu-top-bar-right li .sub-menu-dropdown a span:hover{
color:green;
}

Best Regards

Hi Elise,

I tried this and it didn’t work. That grey bar is still there somehow.

Thanks.

Hello,

Now I see which line you mean it is not very clearly visible. Well, please take this code: https://prnt.sc/svig90 and replace with this one:

#menu-top-bar-right li .sub-menu-dropdown a {
padding:0 10px 0 10px;
background:transparent
}

Best Regards

Thanks a lot Elise for your help. It worked like a charm. One last question in this one, how can I increase the bar size i.e. the size of the “US STORE” placeholder.

Thanks.

By size, I mean the length. That is now 88px, if I want to change that to say 100px, how do it do that.

Thanks.

Hello,

Replace this code:

#menu-top-bar-right li .sub-menu-dropdown{
max-width:89px;
} 

for this one:

#menu-top-bar-right{
max-width:100px;
min-width:100px;
}
#menu-top-bar-right li .sub-menu-dropdown{
max-width:100px;
min-width:100px;
left:0
}

Best Regards

Thanks a lot Elise for your help. Please close the case.

[Author]

Posts