Sub menu issues

[Jacko_Pinto]

Hello!

Been trying to fix a couple of issues but haven’t been succesful:

• I need to add space to the “sub-menu”, right now it’s covering the “parent menu” when I hove over it. See attached screen shot

• How can I make the sub-menu “column” narrower? I’d also like it to align to the parent menu.

Thanks for the help!

[paul.r]

Hi Jacko,

You can adjust the alignment under Theme Options > Header > Navbar > Navbar Top Height

Thanks

[Jacko_Pinto]

Thank you for the reply.

How about making the drop down “column” narrower and aligning the sub menu to the right?

Thanks!

[ruenel]

Hello @Jacko_pinto,

To make the dropdown a little narrower and move it to the right, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.masthead-inline .x-navbar .desktop .sub-menu {
    min-width: 200px;
    left: 0;
    right: auto;
}

We would loved to know if this has work for you. Thank you.

[Jacko_Pinto]

Thank you very much! Lastly, how can I add a background color to the dropdown?

[nabeel]

Hi again,

To change the background color of the sub menu, simply replace the previous code with the following code:

.masthead-inline .x-navbar .desktop .sub-menu {
    min-width: 200px;
    left: 0;
    right: auto;
    background: #ce6521 !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Jacko_Pinto]

Thank you very much, it worked great!!

[nabeel]

Glad it worked.

Cheers!