Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 10, 2018 at 7:01 am #954386
    FionaH

    Hi,
    I have added a custom header widget to my header.
    So Logo Left, Menu below, header widget to the right of page.

    When I look at the site on mobile, the header widget stays firmly inline with the logo, and covers the menu burger. I think it should ‘flow’ down under the logo and probably under the burger too.

    * I’m using this code for a CTA in the widget:

    [av_button label='Call 0414 347 345' link='manually,tel: 0414 347 345' link_target='_blank' size='small' position='right' label_display='' icon_select='yes' icon='ue854' font='entypo-fontello' color='theme-color' custom_bg='#498ad8' custom_font='#ffffff' av_uid='' admin_preview_bg='']

    *I ADDED this code to my functions.php file

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

    *AND this to the CSS

    #header .widget {
left: 80%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

    per other posts on custom header widgets.
    Thanks,

    May 10, 2018 at 7:50 pm #954814
    Yigit

    Hey Fiona,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 480px) {
#header .widget {
    position: inherit;
    left: 20%;
}}

    Best regards,
    Yigit

    May 15, 2018 at 7:32 am #956820
    FionaH

    Hi Yigit,
    thanks for this – it works great on mobile phone (the widget is above the Logo but thats ok with me.
    BUT on tablet, still a problem. I’m guessing a I need to increase the max-width figure… or is that decrease it?

    May 16, 2018 at 5:11 pm #957596
    Nikko

    Hi FionaH,

    Can you try to give us a link to your site? so we can check further and try to give you css code to fix the remaining issue.
    You can post the link in private content, so only moderators can view it.

    Best regards,
    Nikko

    May 17, 2018 at 4:56 am #957890
    FionaH

    Hi Nikko,
    I simply upped the max-width to over 780px and then this css applies on tablet too. So now I know how to control it, I’m fine, thank you.
    Whilst it would be much better if it flowed under the logo, I can live with it above and may even disable it on mobile and enable a small button at the top of the text section for mobile instead. ho hum.
    kind regards
    Fiona

    May 17, 2018 at 6:53 am #957943
    Nikko

    Hi Fiona,

    Glad that you figured it out :)
    You should be able to make changes you’d like using some css codes.
    Let us know if you still need further assistance or if we can close this thread.

    Best regards,
    Nikko

    May 17, 2018 at 11:52 am #958108
    FionaH

    Yes, it is amazing the changes I can make with css on Enfold. There is a great repository of info in these support questions.
    And I really appreciate the fast and helpful responses from your team.
    Yep, you can close this thread.
    :-)

    May 17, 2018 at 2:16 pm #958164
    Nikko

    Hi,

    Glad we could help :)
    Feel free to comeback if you need further assistance.

    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Header Widget not flowing on Mobile/responsive’ is closed to new replies.