[Resolved] Help with header.

[Heath]

I am trying to get my header to look exactly like the screenshot with the menu on the very right, then the search to the left of that.

Site logo in tbe middle and just a few social icons on tbe left.

I’m totally lost.

[Fernando]

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.

[Heath]

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

[Fernando]

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

[Heath]

It’s in the private area

[Fernando]

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.

[Heath]

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

[Fernando]

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

[Heath]

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

[Fernando]

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

[Heath]

This step has been completed

[Heath]

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

[Fernando]

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;
}

[Heath]

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

[Fernando]

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?

[Author]

Posts