[Support request] Help styling header’s primary nav on desktop

[Clifford]

I’m struggling to implement this PSD design for desktop width? https://share.getcloudapp.com/2NuyjZJJ

Any suggestions?

[David]

Hi there,

Tricky one.
Thoughts are this:
1. Set up Top Bar widgets for phone and email.
2. Set Navigation to Above Header.
3. Set logo – will default display Site Logo.

NOTE: Make sure all elements are set to Full width container and Inner is set to Contained.

4. Add this Snippet to wrap Top bar, Nav and Header:

add_action ('generate_before_header', function() {
  echo '<div class="header-wrap">';
} , 1 );

add_action ('generate_after_header', function() {
  echo '</div>';
} , 30 );

5. Add this CSS:

.header-wrap {
    position: relative;
}

.site-header {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(120deg, rgba(0, 39, 255, 1) 15%, rgba(0, 39, 255, 0) 15%);
    pointer-events: none;
}

.site-header a {
    pointer-events: auto;
}

This will absolutely position the Logo over both Top and Nav.
And adds a hardstop gradient to give you the Background color from edge of the screen to behind the logo. I would suggest you incorporate the Blue diagonol background in your logo image as well.

[Author]

Posts