Archived topic

Centered Logo and Site Description, Split Header Menu, and Sticky Secondary Menu

7 replies · Started by Theron on February 27, 2022

Viewing posts 1–8 of 8

February 27, 2022 at 7:12 am #2135347

Hi! I've also got the menu split left and right using code from a forum topic.

I've got the Logo centered but can't get the site description to show. When I had it showing on desktop size, it wouldn't show on tablet and phone.

When I make the Primary and Secondary Menus sticky (Primary using the customizer and secondary with CSS), the Primary sticky menu changes size. I've used Top in the Secondary Menu sticky CSS but I can't seem to get it right for all screen sizes.

I've tried this with and without merging the header and nav.

So I wonder:

Can I use CSS to make the primary and secondary navs sticky and not use the sticky feature? I don't know the selectors for the different size screens.

Can I make the Primary and Sticky headers the same height so the same Top number will keep the Secondary Menu where it needs to be?

Thanks for any help.

February 27, 2022 at 11:45 am #2135688

Hi Theron,

Let's handle one question at a time.

I'm not seeing the site description in HTML even with it on in customizer.

Can you try disable all other plugins except GP premium and switch to parent theme?

Let me know :)

February 27, 2022 at 12:28 pm #2135733

Did that! Plugins off except GP Pro, using GP Theme rather than child theme.

February 27, 2022 at 12:58 pm #2135759

You are using Navigation as header option, this option removes the site description from the site branding to keep the layout simple.

You can disable this option to make the site description to show.

February 27, 2022 at 2:06 pm #2135812

Thanks! That fixes the site description.

I put the code from the child theme back into the parent them you told me to switch to, and then made the secondary nav sticky. The difference in heights still means I need one Top setting for the regular Primary Nav and another Top setting for the Sticky Nav.

Is this a usual problem? Maybe I am missing something.

Also, I can't get sticky to work at all on Tablet size. I think I need to read more about media queries and learn about the breakpoint menu options.

So this was great, and thanks for any further advice.

February 27, 2022 at 2:13 pm #2135817

We can use CSS only to make header sticky if you don't want any animation during the transition.

You can disable the sticky header in customizer and try this CSS:

body .site-header {
    position: sticky;
    top: 0;
}

February 27, 2022 at 5:00 pm #2135915

Yay, all problems solved! Browser directives were needed to get Top to work properly in Chrome, Brave, and MS Edge.

Thanks again for your excellent support.

February 27, 2022 at 5:08 pm #2135927

Glad to hear that :)

You are very welcome!

This archived topic is closed to new replies.

Start building better websites today.