Help with header.

Hi Heath,

From my end, this is what I see on mobile: https://share.getcloudapp.com/nOubD9ly

May we know what exact details need to be changed? Or are you seeing something different?

Let us know.

I think I hadn't cleared my cache. That was from a separate theme and I'm wanting to do the same thing with generatepress

Can you share the link to where you want to implement this?

It's in the private area

I see. Let's add the Social Icons first.

Can you create a Block Element - Hook, hooked to after_primary_menu, and then add the Social Icons through GenerateBlocks Buttons? Place the GB Buttons inside a Container Block as well so you can set the container to hide on desktop and tablet if you prefer.

Let us know once you've done so.

I must be missing something. I've created a Block Element but it is not showing after_primary_menu in the location display rules.

It's not in the Display rules. after_primary_menu can be found in the Element Setting. See: https://share.getcloudapp.com/NQujKNlo

Thanks. I feel silly for missing that. Getting this set up now. Is there a tiktok icon?

There isn't by default. Perhaps you can try this?: https://fontawesome.com/icons/tiktok?s=solid&f=brands

This step has been completed

I qddes the social icons. Are y'all able to assist with the next steps?

Great! Now, try adding social-icons to the class list of the Container Block holding the Icons.

Then, add this CSS:

nav#mobile-header .gb-container.social-icons {
    order: -1;
    margin-right: auto;
}

nav#mobile-header .site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

nav#mobile-header .site-logo.mobile-header-logo img {
    width: 100px;
    height: auto !important;
}

nav#mobile-header > .inside-navigation {
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
}

nav#mobile-header span.menu-bar-item.search-item a {
    padding: 0;
}

It seems that css didn't quite work out. It did something funky.

I checked your site, and it seems social-icons hasn't been added to the class list of the Container Block yet in your Element. Can you add that first?