Menu width (via custom CSS) not showing on all browsers
-
-
- Sean K.
- Sr. Rocketeer
- Posts: 110
- Thanks: 0
-
I have a site under development at
dev.mission-bbq.com
. I am using some custom CSS (see below) to set the padding and font size of the main menu items over a few breakpoints.
I am using a Chromebook and everything looks correct to me (see attached screen grab). But when I test on all other browsers the settings aren't going into effect -- which ends up cutting off the last menu item on my main menu. See - www.browserstack.com/screenshots/d799043...d96cff688e37fb65728d
How can I correct this?
Custom CSS I'm using:
// Gantry 5 custom CSS file
// import breakpoints
@import "dependencies";
// Typical values are the default breakpoints set in Gantry 5
// but these values are user definable in style settings
// so that is why the code below uses mixins to get the actual
// values from Gantry 5 template.
// commonly used media queries
// typically min 75rem
@include breakpoint(large-desktop-range) {
/*.g-main-nav .g-toplevel > li.g-menu-item {padding: 0 0px;}
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {font-size: 1.0rem;}
.g-main-nav ul, #g-mobilemenu-container ul {margin-left: 0px;}*/
.g-main-nav .g-toplevel > li .g-menu-item-content {padding-right: 20px;padding-left: 20px;color: white;font-size: 1.1rem;}
.g-main-nav ul, #g-mobilemenu-container ul {margin-left: -20px;}
}
// typically range 60rem to 74.938rem
@include breakpoint(desktop-range) {
.g-main-nav .g-toplevel > li .g-menu-item-content {padding-right: 15px;padding-left: 15px;color: white;font-size: 0.9rem;}
.g-main-nav ul, #g-mobilemenu-container ul {margin-left: -15px;}
}
// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {
.g-main-nav .g-toplevel > li .g-menu-item-content {padding-right: 15px;padding-left: 15px;color: white;font-size: 0.75rem;}
.g-main-nav ul, #g-mobilemenu-container ul {margin-left: -15px;}
}
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22281
- Thanks: 3225
- messin' with stuff
- It's visible for me until I get below 968px (60rem) -- the item wraps... there just isn't enough space there
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22281
- Thanks: 3225
- messin' with stuff
- I'd recommend setting "hidden-tablet" on your Contact item... seems the least important one (perhaps) and it'll still be accessible from the footer which is where most people naturally look... I don't think you want to reduce padding/margins anymore at that resolution... they'll be too small to easily click/tap
- Last Edit: 7 years 10 months ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Sean K.
- Sr. Rocketeer
- Posts: 110
- Thanks: 0
-
Thanks for your reply but hiding one of the main menu items just isn't an option in this case.
I can adjust the padding for one of the smaller breakpoints (below 968px) to try to squeeze that last menu item onto the one row.
However in my previous post I linked to some screengrabs of how the menu looks on a variety of browsers. See -
www.browserstack.com/screenshots/d799043...d96cff688e37fb65728d
All of those are at 1024px width. If you look closely you'll see that there are differences between how the browsers are interpreting my padding settings. Only Chrome is showing all the menu items at that width -- all the other browsers do not.
So my question is why this is happening? Is there any additional custom CSS you can think of that will have all browsers showing the same thing at 1024px?
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22281
- Thanks: 3225
- messin' with stuff
-
I can't see your site right now, it's throwing the error page, all I can say is that all browsers do not render equally... you may need to squeeze a few more pixels in your padding/margins for other browsers... I tend to optimize in Chrome first myself, then Mozilla, and if I'm feeling froggy, then Edge
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
Time to create page: 0.082 seconds