[Resolved] Min menu width

This topic contains 13 replies, has 2 voices, and was last updated by  Andrew Misplon 3 months ago.

  • Author
    Posts
  • #12068

    Bruno
    Participant

    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

    #12069

    Andrew Misplon
    Keymaster

    Hi Bruno

    Thanks for reaching out.

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

    #12079

    Bruno
    Participant

    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

    #12080

    Andrew Misplon
    Keymaster

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

    #12081

    Bruno
    Participant

    HI, sorry, I loose the image

    http://demo3.brunotominetti.com/menu-width.jpg

    #12082

    Andrew Misplon
    Keymaster

    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;
    }
    #12083

    Andrew Misplon
    Keymaster

    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;
    }
    #12084

    Bruno
    Participant

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

    Have a nice day and Best regards
    Bruno

    #12085

    Andrew Misplon
    Keymaster

    Super 🙂 Glad to hear that helped.

    All the best.

    #12086

    Bruno
    Participant

    HI, Andrew, excuse me I have anohter question: on mobie view the screen move like You can se here:
    http://demo3.brunotominetti.com/VID_20190214_110137.webmsd.webm

    Tere is something to fix that?

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

    #12087

    Bruno
    Participant

    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

    #12088

    Andrew Misplon
    Keymaster

    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?

    #12089

    Bruno
    Participant

    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

    #12090

    Andrew Misplon
    Keymaster

    Super 🙂 Glad all is normal now.

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

You must be logged in to reply to this topic.

Scroll to top