[Resolved] Responsive screen width

[Tom]

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: https://gist.github.com/generatepress/c23aef2d05807c39bb32

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.

[Hamish]

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

[Tom]

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

What size are you trying to initiate it at?

[Hamish]

Works now. Thanks again. Have a good Easter !

[Hamish]

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

[Tom]

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 🙂

[Max]

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 https://gist.github.com/generatepress/c23aef2d05807c39bb32 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: http://prjct1.atelier-mk.com/uk/ . 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!

Regards,
Max

[Leo]

Hi Max,

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

[Max]

Hi Leo,

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

[Author]

Posts