Site logo

Archived topic

Post title alignment in sticky nav

3 replies · Started by Michel on June 21, 2022

Viewing posts 1–4 of 4

Hi guys,

I need some help to solve a problem with a friend's site header.

Description of the setup - with link to screenshot in the private information:

    Navigation as header across the board, full-sized on desktop and tablet.

    Hamburger menu to handle nav on mobile.

    Sticky navigation kicking in when you scroll down.

    On posts, the post title is hooked in the sticky nav on desktop and tablet by using a Block - Hook Element but excluded for mobile thanks to CSS.

Problem 1:

The header was built through a combination of Customizer, an Element for the post title hook and some CSS. We don't know how to come up with the solution to make the post title aligned centrally, between the logo without "cheating" with padding, which can easily mess up the layout.

Problem 2:

We tried a few different hooks for title in the sticky nav, and not all hooks work.

Perhaps some CSS is needed to change the order of the site logo, post title and navigation?

Hi there,

try this CSS:

.stuckElement .main-nav {
    margin-left: auto;
}

It works. That was quick.

Awesome - glad to hear that!

This archived topic is closed to new replies.