Docs

[Steve123]

Hi,
How do I reduce the horizontal length given to each entry in the first level (only that level) of a drop-down menu, please? See screenshot – it’s way too wide.

Thanks,
Steve

[Christian]

Hey Steve,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Steve123]

Sorry, but why do you need my url?

This is a brand new site, just being built, hardly any pages or plugins, and I’ve provided a screenshot to show the dropdown – there is nothing more to see because that’s all there is of the menu so far. Surely there is a couple of lines of code I can paste into the Customizer.

I really do not understand why almost every time I ask for some simple code – never anything complicated – I don’t get anything but a request for my url. On occasions when the url hasn’t been available because I’ve been creating the site off-line, then your Support has found the code I need without seeing my site. So why ask instead to start with of just giving the code?

How is anyone ever supposed to build with X using Xampp etc, when you constantly demand urls? If you want X to have a reputation as a pro level theme, you cannot demand urls unless the customization requested is something extraordinary.

[Thai]

Hi There,

To fix this issue, please add the following CSS:

.desktop .sub-menu {
min-width: auto;
}

Hope it helps 🙂

[Steve123]

Hello Thai,

Thank you for providing some code. That works great, thanks.

This question is related to that one – My navbar menu have a dropdown with one extra level going off from that. Do you have code to specify the width of the sub-menu width for each level, please? If not, how can I set a min width for all sub-menu elements, please?

Thanks again,
Steve

[Joao]

Hi Steve,

Since I dont have your website to look at I imagine your navbar link is dropping to a second line after you add a certain number of items. You can fix that by going to Appereance > Customizer > Header and adjust your navbar fontsize, link spacing and letterspacing.

Otherwise we can provide you a Media query, but would be much better to avoid that we have to exchange to many messages, that you can provide your URL in a private reply in order that we can better understand you and provide you a custom solution.

Thanks

Joao

[Steve123]

Hi,
My site is in development, so it’s not available yet.
My navbar menu has 4 entries and each drops down to reveal a sub-menu / second tier / second level – whatever you like to call it. On hover, each of those second tier entries expands to show more entries on a third tier, which are clickable. All I want to know is:
how to set the width for entries on the second level
how to set the width for entries the third tier (which might be different to the second level width), please.

Thanks,
Steve

[Joao]

Hi Steve,

Please add the following code to Appereance | Customizer | Custom | CSS and adjust according to your needs.

.desktop .sub-menu a {
    padding-left: 90px;
    padding-right: 90px;
    font-size: 20px;
}

Hope it helps

Joao

[Steve123]

Hi Joao,

Thanks, but it isn’t the padding I want to change. I want to set the sub-menu width for each level/tier, e.g

.desktop .sub-menu 1 {
width: 150px;
}

.desktop .sub-menu 2 {
width: 300px;
}

What is the code that will do this, please?

Thanks,
Steve

[Thai]

Hi Steve,

Please try with this CSS:

.desktop .x-nav > li ul.sub-menu {
    min-width: auto;
    width: 150px;
}
.desktop .x-nav > li ul.sub-menu li > ul.sub-menu {
    min-width: auto;
    width: 300px;
}

Hope it helps 🙂

[Steve123]

Thank you, Thai. That is just what I wanted.

[Joao]

Glad to hear it,

Joao

[Author]

Posts