[Resolved] Again help with mobile header

[Leonardo]

Hello how are you?

I had to make some corrections to the header of the site I’m looking for parts and I’m, again, finding it difficult to adjust the header on mobile.

The elements are there, but unconfigured. The way I want to leave them, snug next to each other, is:

hamburger menu / logo / user and cart

Is it possible to help me?

I am sending the link and data for access.

[Ying]

Hi there,

The URL you attached doesn’t link us to the login page, can you check?

[Leonardo]

Sorry

[Leonardo]

Sent again!

[Fernando]

Hi Leonardo,

In your Block Element, set the view to mobile, and try setting the Container Width of the columns to 50% or less. They’re currently set to 100%: https://share.getcloudapp.com/kpu8lJyR

Try setting the horizontal spacing through the Grid’s Block settings instead as well: https://share.getcloudapp.com/o0uGJRk2

Kindly let us know how it goes.

[Leonardo]

Fernando, you again =D

It’s true, I had forgotten about those other adjustments.

I did and now I would need to change them, leaving:

menu / logo / icons

[Ying]

Try to add this CSS:

#mobile-header button.menu-toggle {
    order: -1;
}

[Leonardo]

Thanks!!!

[Leonardo]

Hello, I would like to try the topic to see is it possible to throw the logo to the left and the menu to the right to change the image I am sending)

https://formuladiecast.com.br/wp-content/uploads/2022/07/stick_menu.png

NOTE: this setting will only be for the fixed menu desktop.

Login and password also sent.

[Ying]

Add this CSS:

@media (min-width: 769px) {
    #sticky-navigation .navigation-branding {
        position: relative;
        transform: none;
        left: auto;
        order: -1;
        margin-right: auto;
    }
}

[Leonardo]

Hello, ying!

It almost did… However, the logo is on the right and I would like to place it exactly the other way around, that is, on the left side of the menu.

https://drive.google.com/file/d/1zKqla7-6Iw3jqAXzbiqgMkZV262-PQf8/view?usp=sharing

[Leonardo]

A second question…

How do I change the css from the sticky menu to links when “mouse over” and “links active”?

I was able to change only the “default” color.

[Ying]

I’ve updated the CSS here:https://generatepress.com/forums/topic/again-help-with-mobile-header/#post-2285507

For the hover color, try this:

.main-navigation.navigation-stick .main-nav ul li:not([class*="current-menu-"]):hover > a {
    color: black;
}

[Leonardo]

Thank you, Ying.

Now the following remains:

modify the color of the active link in the sticky menu

Thank you very much!

[Fernando]

Hi Leonardo,

You can try this CSS:

nav#sticky-navigation.is_stuck .main-nav ul li.current_page_item a {
    color: rgba(255,255,255,0.6)
}

Hope this helps!

[Author]

Posts