Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 21, 2024 at 2:24 pm #1465088
    steviger

    Hi guys,

    There’s a strange issue that I can’t seem to fix. In the header are two custom-html widgets. Looking fine on desktop but they are gone in mobile view.
    The CSS I use is (for example the flags)

    #header #custom_html-15 {
position: absolute;
right: 270px;
top:-198px !important;
z-index:9996;
}

@media only screen and (max-width: 767px) {
#header #custom_html-15 {
position: absolute;
left: 127px;!important;
top:20px !important;
	z-index:9996!important;
}}

    I sifted through the entire CSS and there’s no display:none; rule to be found in combination with these widgets.
    Any ideas on what I’m missing here?

    Help will be greatly appreciated

    Best regards,
    Steven

    August 21, 2024 at 4:35 pm #1465099
    Rikard

    Hey steviger,

    It’s the div with ID header_main_alternate which is hidden. I’m not sure exactly how you added the widgets, but you can check the documentation on the subject here: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Rikard

    August 21, 2024 at 4:56 pm #1465105
    steviger

    Hi Rikard,
    Thanks for your reply.

    The widgets I added in the same way I always do. In functions.php:

    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );

function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'Topmenu' );        
        dynamic_sidebar( 'Tagline' );
}

    And added the widgets with exactly the same name…

    It only happens on this website and coincidentally, the theme here has just been updated to the latest version of Enfold. What I not yet did with other websites.

    Regards,

    Steven

    August 21, 2024 at 7:51 pm #1465121
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
#header_main_alternate {
  display: block;
}
#header_main_alternate .main_menu {
  display: none; 
}
}

    Best regards,
    Rikard

    August 22, 2024 at 11:22 am #1465158
    steviger

    Hi,

    I added the CSS but it didn’t change anything. After adding !important, it did.
    Thanks!
    Regards,

    Steven

    August 22, 2024 at 2:37 pm #1465169
    Rikard

    Hi,

    Great, I’m glad that you got it working. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Header widgets disappear in mobile view [SOLVED]’ is closed to new replies.