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

Home Forums Support Help styling header’s primary nav on desktop

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1405475
    Clifford

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

    Any suggestions?

    #1405487
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.