Archived topic

Mobile Header: Logo right and mobile menu left not working after update

1 reply · Started by Antonio on March 23, 2018

Viewing posts 1–2 of 2

March 23, 2018 at 2:31 am #527539

Hi,

This morning I updated the Gp Premium to the new version 1.6 and suddenly my mobile header lost the style I predefined in CSS (I am using the child theme)

In CSS I have this:

.main-navigation.mobile-header-navigation.stuckElement {
	height: 100px;
}

.main-navigation.mobile-header-navigation.stuckElement .site-logo {
	width: auto;
}

.mobile-header-navigation .mobile-header-logo img {
	height: 100px !important;
}

.main-navigation.mobile-header-navigation.stuckElement .site-logo.mobile-header-logo {
	float: right !important;
}

.main-navigation.mobile-header-navigation.stuckElement .menu-toggle {
	float: left !important;
	font-size: 35px;
}

But after the update the logo is on the left and the navigation on the right.

I need the opposite: Logo right, Mobile Navigation left (Menu Toggle)

How can I solve this?

March 23, 2018 at 9:46 am #528173

Hi there,

Since the mobile header is using Flexbox now, we can do this:

#mobile-header .menu-toggle {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-right: auto;
}

#mobile-header .site-logo {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin-right: 0;
}

This archived topic is closed to new replies.

Start building better websites today.