Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Responsive screen width

Home Forums Support [Resolved] Responsive screen width

Home Forums Support Responsive screen width

Viewing 9 posts - 31 through 39 (of 39 total)
  • Author
  • #181085
    Lead Developer
    Lead Developer

    Caching plugins make it near impossible to set a width with an option, which sucks for those of us not using any caching plugins.

    You can however tell the mobile menu to kick in at any width you want with this CSS:

    Just change the 768.

    Be sure to star the gist as it will change in the future as the theme changes, and you’ll need to update the code.


    Thanks Tom

    Can I add that straight to the SO custom css area? I just did and it isn’t doing anything.

    Would share the site but it local.

    I replicating an older site and trying to create Material / aka old school buttons. They actually look refreshing! 7 nav items. Number 7 was wrapping. The nowrap below isn’t the answer.

    Thanks again

    current custom css:

    .main-navigation ul {
    margin: 0;
    padding: 0;
    white-space: nowrap;

    .main-navigation ul li {
    width: 13%;
    background-color: #403f3f;
    display: block;
    margin-left: 3px;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2), 0 2px 3px 0 rgba(0,0,0,0.19);
    border-radius: 4px;

    .inside-navigation.grid-container {
    max-width: 100%;
    padding-bottom: 8px;
    padding-left: 0px;

    Lead Developer
    Lead Developer

    Yes adding that code to your custom CSS plugin should work.

    What size are you trying to initiate it at?


    Works now. Thanks again. Have a good Easter !


    Oh do you thinking caching is not good.? The speed increases seem significant

    Lead Developer
    Lead Developer

    Caching can be very good as long as you’re not actively working on the site. Having it enabled while development can cause a lot of headaches.

    Hope you have a good Easter as well πŸ™‚


    Hi Tom,

    I have a rather busy primary navigation on the website that I am working on at the moment and I need to collapse it to a mobile-menu-type hamburger icon at a relatively large width.

    I used the css-code that you shared on in order to collapse it. While it generally works well after I changed a desired max-width to 1150px, I would like to change the position of the hamburger icon to the top right corner where the mobile menu icon is placed at the smaller screen sizes.

    Sadly, I don’t do any coding and I am learning how to build the website on the go.

    Could you please help me change your css to relocate the hamburger icon?

    The link to the temporary domain where I am constructing the site is: . Everything is in Cyrillic but I think that you will see the issue when you will try to resize the window to make it narrower.

    Thank you in advance!


    Customer Support

    Hi Max,

    I think it’s best if you can open a new topic. This one is quite long already πŸ™‚


    Hi Leo,

    Thank you. I will open a new topic as you suggested.

Viewing 9 posts - 31 through 39 (of 39 total)
  • You must be logged in to reply to this topic.