[Support request] Header with 3 columns

Home Forums Support [Support request] Header with 3 columns

Home Forums Support Header with 3 columns

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1681734
    Alberto

    Hello, I would like to have a header with 3 columns where the logo is in the first column, the main menu is located in the second column and a search widget (Adv Woo Search) is located in the 3rd column.

    For tablets and mobiles these columns could be placed one below the other.

    I will appreciate your help.

    #1682007
    David
    Staff
    Customer Support

    Hi there,

    it may take a little CSS, but if you:

    1. Set your Navigation Location to Float Right. This will position it to the right of the logo.
    2. Add your Adv Search to the Header Widget. This will place that to the right of the menu

    Once all three elements are inline – share a link to the site and ill look at whats need to align them

    #1682140
    Alberto

    I send you the access data, the site is under maintenance. Thanks since now!

    #1682280
    Ying
    Staff
    Customer Support

    Hi Alberto,

    You are actually have 4 columns in the header including the site description, you could give this CSS a try, but I might not work work in smaller screens. I would recommend to add the site description into the logo image.

    @media (min-width: 769px) {
        .inside-header.grid-container.grid-parent {
            display: flex;
            flex-flow: row wrap;
        }
        .inside-navigation {
            display: flex;
        }
        .site-logo {
            order: 1;
            width: 30%;
        }
        .header-widget {
            order: 3;
            width: 20%;
        }
        p.site-description {
            order: 4;
            margin-top: -20px;
        }
        nav#site-navigation {
            order: 2;
            width: 50%;
        }
        div#primary-menu {
            margin-left: auto;
            margin-right: auto;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.