Topic: A little help with CSS

Marcel
February 12, 2024 at 3:47 am

Hello,

Could you please help me with the alignment of the menu on mobile devices, so that the “Seats Studio” custom-link is aligned with the other elements of the menu, on the left side?

Also, how to proceed so that “ECO-LEATHER” appears on one line? (at this moment it appears divided into two lines)

Thank you!

David

February 12, 2024 at 5:32 am

Hi there,

1. remove this CSS:


.main-navigation .main-nav li.menu-item-float-left {
    float: left !important;
    padding-left: 200px !important;
}

2. remove this CSS:


.main-navigation .main-nav {
    padding-right: 140px !important;
}

3. Add this CSS:


@media(min-width: 769px) {
    #site-navigation .main-nav ul {
        max-width: 1200px;
        margin-inline: auto;
        display: flex;
    }
    #site-navigation .main-nav li:first-child {
        margin-right: auto;
    }
}

What it will do is control the overall width of the menu on desktop and then push the first menu item to the left. And this will not affect the off canvas menu

Marcel
February 14, 2024 at 1:51 pm

Thank you David. Now it’s good for Desktop + Mobile, but what to do, so that the menu is visible on the tablet as well? At the moment it is not visible.

Ying

February 14, 2024 at 2:43 pm

Try adding this CSS:

@media(min-width:767px) {
    .slideout-navigation .slideout-menu, .slideout-navigation .main-nav {
        display: block;
    }
}

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

A little help with CSS