Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 18, 2018 at 7:16 pm #987145
    bethperkins

    I used your instructions for added a header widget beside the logo but it is not displaying correctly on small devices.
    Here is a link to my website:

    Homepage

    Here is the code I added to my finctions file:

    add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
  dynamic_sidebar( 'header' );
}

    And here is my css:

    #header .widget {
    left: 53%;
    padding-top: 0;
    position: absolute;
    top: 20px;
    transform: translate(-50%);
    float: right;
    color: #000000;
}

    Could you help me with code that will allow the header to drop below the logo on small screens?
    Thank you!

    July 19, 2018 at 7:54 am #987293
    Rikard

    Hey bethperkins,

    Please try this in Quick CSS:

    @media only screen and (max-width: 1100px) {
#header .widget {
    left: auto;
    transform: translate(0%);
    right: 10px;
}
}

    You might need more media queries for smaller devices. On phones it might be better to add the text in a regular element on the page since there’s not all that much space in the header to fit all that text.

    Best regards,
    Rikard

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