Need help with menu alignment

This topic has 15 replies, 2 voices, and was last updated 4 years, 8 months ago by hazesmokeshop.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
June 5, 2020 at 5:19 am #200874

hazesmokeshop
Participant

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.

June 5, 2020 at 12:22 pm #201001

Elise Noromit
Member

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

June 5, 2020 at 4:02 pm #201091

hazesmokeshop
Participant

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.

June 5, 2020 at 10:30 pm #201169

Elise Noromit
Member

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

June 5, 2020 at 11:18 pm #201189

hazesmokeshop
Participant

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.

June 6, 2020 at 1:57 pm #201353
Elise Noromit
Member
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
June 6, 2020 at 6:41 pm #201409

hazesmokeshop
Participant

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.

June 6, 2020 at 8:54 pm #201421
Elise Noromit
Member
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
June 6, 2020 at 9:00 pm #201423
hazesmokeshop
Participant
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;
}
```
June 7, 2020 at 10:31 am #201479
Elise Noromit
Member
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
June 7, 2020 at 7:10 pm #201532

hazesmokeshop
Participant

Hi Elise,

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

Thanks.

June 7, 2020 at 8:12 pm #201548
Elise Noromit
Member
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
June 7, 2020 at 10:29 pm #201569

hazesmokeshop
Participant

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.

June 7, 2020 at 10:30 pm #201570

hazesmokeshop
Participant

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.

June 8, 2020 at 6:18 am #201611
Elise Noromit
Member
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
June 10, 2020 at 6:47 am #202235

hazesmokeshop
Participant

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

Posts