Archived topic

Sticky header alignment

3 replies · Started by Belinda White on June 29, 2020

Viewing posts 1–4 of 4

June 29, 2020 at 11:15 pm #1346494

I need the logo to remain on the right for this site when you scroll and the sticky header appears. As you can see it changes to the left at the moment. So the logo and menu layout to remain the same for the sticky header.

I have added this CSS, but makes no effect.

.site-logo.sticky-logo {
float: right !important;
}

.main-navigation.navigation-stick .navigation-logo {
float: right;
}

.nav-aligned-center .main-navigation.navigation-stick {
text-align: left;
}

The site is a local development, however, you can use this link to view.

f2adc679d4ec.ngrok.io

Thank you

Belinda

June 30, 2020 at 2:46 am #1346671

Hi there,

try this CSS:

.main-navigation.has-sticky-branding.navigation-stick .inside-navigation {
    flex-direction: row-reverse;
}
.main-navigation.has-sticky-branding.navigation-stick .navigation-branding {
    margin-right: unset;
    margin-left: auto !important;
}

June 30, 2020 at 2:59 am #1346683

Hi David,
That worked perfectly, thank you.

Belinda

June 30, 2020 at 5:24 am #1346829

Glad to hear that :)

This archived topic is closed to new replies.

Start building better websites today.