[Support request] Header Layout

Home Forums Support [Support request] Header Layout

Home Forums Support Header Layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #636342
    Daniel

    Hi,

    I am trying to create a header similar to the website below:

    https://saha.org.uk

    In desktop view, I want the logo on the left and the phone number and email address stacked on the right (right aligned).

    In mobile view, I want the logo to be centred and the telephone number and email address to appear below the logo (inline and centred).

    Any idea how I can create this? I have been playing around with CSS all afternoon but just can’t get it how I want it 🙂 Any help would be most appreciated.

    Dan

    GeneratePress 2.1.3
    #636430
    David
    Staff
    Customer Support

    Hi Dan,

    so the logo is added to the site identity, and the header set to align left.
    Then add a Custom HTML widget to the Header Widget area and add your links.

    Might need to throw a little CSS at it for text alignment and such and to reorder the mobile stack. If you can set up and share a link we can help.

    #636482
    Daniel

    Hi David,

    Thanks for the reply.

    I’ve managed to achieve mostly what I wanted with the following code:

    .site-logo {
    width: 165px;
    height: auto;
    margin-top: 20px;
    }

    .header-widget {
    margin-bottom: 0px;
    padding-bottom: 20px;
    margin-top: 20px;
    text-align:right;
    }


    @media
    (max-width: 768px) {
    .inside-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: column;
    }
    .site-branding {
    order: 2;
    -webkit-order: 2;
    text-align:center;
    }
    .site-logo {
    order: 3;
    -webkit-order: 3;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 165px;
    }
    }
    .header-widget {
    order: 4;
    -webkit-order: 4;
    }

    .textwidget {
    margin-bottom: -20px;
    }


    @media
    (max-width: 768px) {
    .textwidget {
    text-align:center;
    }
    }


    @media
    (max-width: 768px) {
    .header-widget .widget_lsi_widget {
    display: none;
    }
    }


    @media
    (max-width: 768px) {
    .header-widget .textwidget {
    font-size:5px;
    }
    }

    It could probably be tidied up a bit, but it’s working for now.

    One other thing: I would like the font size in the header text widget to be smaller on mobile. Do you know any code for achieving that? I can’t get it to work.

    Dan

    #636494
    David
    Staff
    Customer Support

    Hi Dan can you share a link to the site? you can edit your original topic and use the Site URL field for privacy.

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