[Resolved] Conditional CSS for Menu Item Depending on Resolution

[Eric]

Hello,

Looking for some help on correctly customizing a menu item when it is displayed vertically, horizontally, or collapsed.

Background: By default, the menu items are spaced evenly in their container. I would like to offset an item and draw more attention to it, but in different ways depending on how the menu is displayed.

Objectives:

1. Create a separate “reservation” button that is offset vertically in the vertical menu.
2. Offset this button horizontally in the horizontal menu.
3. Remove button styling and eliminate the offset in the collapsed mobile menu.

For example, creating and assigning the following class to a menu item:

.button {
border: 2px solid black;
border-radius: 12px;
padding: 0px 10px;
margin-top: 100px;
}

1. creates the desired result in the vertical menu:

https://ibb.co/k9yx9p

2. an undesirable vertical offset in the horizontal menu:

https://ibb.co/g0VYh9

3. an undesirable vertical offset (and out-of-place button styling) in the mobile menu:

https://ibb.co/mnmTFU

Is there a better way to set up either the item class, menu container, etc. to achieve the desired result for all three scenarios?

Thank you!

[David]

Hi there,

can you explain the ‘vertical’ menu? Is this a sidebar or a slideout?

[Eric]

Hello,

Sorry, I’m not too familiar with the terminology, but it is the primary navbar from the ‘Sider’ template.

Hoping to achieve the following:

1. A vertically offset button (down near the bottom of the screen) in the vertical orientation of the menu.
2. A horizontally offset button (near the right of the screen) in the horizontal orientation.
3. Some other, less obtrusive styling in the collapsed menu (but spaced equally with the rest of the menu items).

Thank you.

[David]

Hi there,

so heres the starting point:

https://docs.generatepress.com/article/adding-buttons-navigation/

The code provided will add the button styling, to any device 769px and over, so only on tablet and desktop.

The Sider site actually uses the site header and primary navigation, so the above code would apply to that. You wouldn’t have the horizontal nav as well. So again you could use the code provided in the link and add a margin-top property to that code.

[Eric]

Thank you, David! That was extremely helpful. With your documentation and a little reading up on @media and the template CSS, I was able to achieve the intended look on a couple test devices.

High res desktop with vertical nav:
https://ibb.co/nD11N9

Low res desktop/tablet with horizontal nav:
https://ibb.co/jrrPaU

Mobile menu with collapsed nav:
https://ibb.co/hK2829

—

If you don’t mind, could I confirm a couple details with you?

1. Is this section in rtl.css responsible for converting the navbar from vertical to horizontal?

@media (min-width: 768px) {
.inside-footer-widgets > div {
float: right;
}
.menu-item-has-children ul .dropdown-menu-toggle {
transform: rotate(180deg);
}

2. Is the following code, all added into the wordpress css customization screen, the most efficient way of setting up what was intended? (specifically, any way to avoid the copy-and-pasted code for button styling on high-res and low-res screens)

//vertically offset menu button for high-res screens

@media (min-width: 1000px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
line-height: 35px;
margin-top: 80%;
font-weight: bold;
}

.main-navigation .main-nav .nav-button a:hover {
border-color: #a83f19;
}
}

//non-offset button for low-res screens

@media (min-width: 768px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
line-height: 40px;
font-weight: bold;
}

.main-navigation .main-nav .nav-button a:hover {
border-color: #a83f19;
}
}

//bolded nav item for mobile screens

@media (max-width: 768px) {
.main-navigation .main-nav ul li.nav-button a {
font-weight: bold;
}
}

3. Is there a more flexible way to define mobile formatting rather than absolute pixel width?

Thanks again.

[David]

Thats great.

1. the RTL.css is for correcting alignment for Right To Left language setups.
2. I would consolidate CSS Rules like so:

.main-navigation .main-nav ul li.nav-button a {
    font-weight: bold;
}

@media (min-width: 768px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        line-height: 40px;
        font-weight: bold;
    }
    .main-navigation .main-nav .nav-button a:hover {
        border-color: #a83f19;
    }
}
/* this should come after the @media 768px rule as it overwrites the margin property */
@media (min-width: 1000px) {
    .main-navigation .main-nav ul li.nav-button a {
        margin-top: 80%;
    }
}

3. @media is really flexible, just think logically about how CSS works, it Cascaades, so the code above reduced the need for an additional @media by just placing the general rules first and applying only the additions or changes. There are other unit measures such as REM, EM, %, VW, VH etc. that calculate sizes based upon a known or calculate variable. Worth reading up on their uses.

[Eric]

Got it, thanks David! Appreciate your help. I think that answers all the questions I had on this topic.

[David]

Glad i could be of help 🙂

[Author]

Posts