Log in Get SwiftGrid →
Resolved

Min menu width

Ultra Theme started by Bruno Feb 13, 2019 13 replies
Bruno Feb 13, 2019 · 5:54 pm #12068

HI, Support Team;
here the url of my demo:
http://demo3.brunotominetti.com/test1
I am trying to insert css custom attributes in order to have the main menu with theese long labels that I can not change.. :-((

The original attributes:
.main-navigation {
box-sizing: border-box;
float: right;
max-width: 65%;
margin-left: 0;
}
Something I have read in the posts of the support area but it didn’t work:
.main-navigation {
max-width: none;
}
I tried like this but it didn’t work:
.main-navigation {

max-width: 80%;

}
Thank You in advance, even for the very good theme; sorry for my bd english
Bruno

Andrew Misplon Puro Feb 13, 2019 · 6:05 pm #12069

Hi Bruno

Thanks for reaching out.

How would you like the menu to change from how it is now?

Bruno Feb 14, 2019 · 9:20 am #12079

HI Andrew,
I would lke to have the menu width more than 65%, see the screenshot showing watts hapent when resizing browser window:

this css attribute didn’t change the whidt

.main-navigation {
max-width: 80% or none

}

Thank you wery much in advance
Bruno

Andrew Misplon Puro Feb 14, 2019 · 9:22 am #12080

Thanks 🙂 Can you perhaps try sending the screenshot again? I don’t see it. https://imgur.com/upload is easy to use.

Andrew Misplon Puro Feb 14, 2019 · 9:25 am #12082

The default min-width is 144px. You can try adding the following to Customize > Additional CSS or the Custom CSS location of your choosing and edit the value as required:

.main-navigation ul ul li {
	min-width: 200px !important;
}
Andrew Misplon Puro Feb 14, 2019 · 9:28 am #12083

Please, ignore my above reply. To resolve the problem in your screenshot, either increase the mobile menu breakpoint to 1100, you can do this at Customize > Theme Settings > Responsive Menu Collapse or you can try the following in Additional CSS/Custom CSS:

.main-navigation {
	max-width: none !important;
}
Bruno Feb 14, 2019 · 9:44 am #12084

HI, Andrew,
DONE!!!! :-)) Now it as I would, infinitelly Thank you

Have a nice day and Best regards
Bruno

Andrew Misplon Puro Feb 14, 2019 · 9:45 am #12085

Super 🙂 Glad to hear that helped.

All the best.

Bruno Feb 14, 2019 · 11:11 am #12087

HI Andrew, I solved Ihope moving the css settings to anther installation.
I will sen You th resut when done

Really Thank You again
Have a nice day and Best regards
Bruno

Andrew Misplon Puro Feb 14, 2019 · 12:16 pm #12088

Hi Bruno

Are we sure this doesn’t happen with every website? It might be more obvious with Ultra because the background colour behind the container is the same as the footer background, a dark grey.

body {
	overflow-x: hidden;
}

Above is usually what we’d use for a problem like this but I don’t think this is a normal overflow issue. For example, does github.com do the same thing on your phone, just with a white background?

Bruno Feb 14, 2019 · 2:18 pm #12089

I Andrew, not the problem was because of a wrong txt edition, copied from the old site, right now is correct; I’ woring on, I will show You the result
Thank You again
Have a nice day and Best regards
Bruno

Andrew Misplon Puro Feb 14, 2019 · 2:44 pm #12090

Super 🙂 Glad all is normal now.

14 posts