[Support request] Help with formatting header

Home Forums Support Help with formatting header

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1394154
    Neal

    Hello,

    Can you help me with the css to customize the header? I’d like for the header to have the following:

      * On desktop, logo is aligned to the left, primary nav is aligned to the right, search is to the right of primary nav, no off-canvas menu.
      * On tablet/mobile, off-canvas menu is float aligned left, logo image is centered, search icon is on the right hand side. Close icon ‘X’ is aligned to the top right and says ‘Close X’
      * Essentially, I want the off-canvas menu to behave like it does for this site https://www.realestatedirect.com

    This css gets me close, but has a few issues. The logo is always centered, but I only want it centered for tablet/mobile and left aligned for desktop. It doesn’t play nice with the search icon:

    /* Arrange Header elements */
    .inside-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    
    /* Abs position logo center */
    .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Force nav left and site title right */
    .site-branding {
        margin-left: auto;
    }
    
    .site-branding {
        text-align: right;
    }
    
    /* Tablet */
    @media (max-width: 1024px) and (min-width: 769px) {
        .inside-header {
            padding: 5px;
            align-items: center;
        }
    
        .site-logo {
            width: 150px;
            height: auto;
        }
    
        .site-branding {
            width: 8ch;
            /* Change width of site title */
            margin-bottom: 0 !important;
        }
    
        .site-description {
            font-size: 10px;
            /* change fornt site */
        }
    }
    
    /* Mobile */
    @media (max-width: 768px) {
        .inside-header {
            padding: 5px;
            align-items: center;
        }
    
        .site-logo {
            width: 200px;
            height: auto;
        }
    
        .site-branding {
            width: 8ch;
            /* Change width of site title */
            margin-bottom: 0 !important;
        }
    
        .site-description {
            font-size: 10px;
            /* change fornt site */
        }
    }
    
    /* Make Header Sticky */
    .site-header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }
    #1394244
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    #mobile-header .menu-toggle {
        order: -1;
    }
    #mobile-header  .site-logo.mobile-header-logo {
        margin-left: auto;
    }
    .slideout-navigation.do-overlay .slideout-exit {
        position: fixed !important;
    }
    .slideout-navigation button.slideout-exit:not(.has-svg-icon):after {
        content: "Close";
        margin: 0 3px 5px 0;
    }
    .slideout-navigation button.slideout-exit {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.