Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1356345

    Hi there!
    I have applied a widget to a header based on this and am wanting to use a different header as this doesn’t work very well at all for mobile devices.
    https://kriesi.at/support/topic/buttons-in-header-above-menu/
    Is that possible?
    Or will I need to change all of the CSS to only apply to desktop – https://kriesi.at/documentation/enfold/add-button-elements-to-your-header/#toggle-id-2
    Many thanks!!

    #1356368

    Hey Suze,

    Thank you for the inquiry.

    You cannot assign a different header on mobile view but you can use this css code to hide the header widgets and adjust the position of the logo and the mobile menu.

    @media only screen and (max-width: 767px) {
    
      /* Add your Mobile Styles here */
    
      .responsive #top #header #header_main .inner-container .widget {
        display: none;
      }
    
      .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
        background-color: #85a8b4;
      }
    
      .responsive #top #wrap_all .main_menu {
        top: 38px;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
      }
    
      .responsive #top #header #header_main .inner-container .logo {
        display: block;
      }
    }
    

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    This a screenshot of the header after adding the above css.

    // https://1drv.ms/u/s!AjjTfXSRbKTvwG-grht5ZEfviqtJ?e=BGO0fq

    Best regards,
    Ismael

    #1356439

    Thank you Ismael. The buttons have gone but it looks like the widget area is still visible and the logo has not resized as shown in your screenshot.
    I added this code to the stylesheet style.css – is that correct?
    https://prnt.sc/ulMqSZL0Arps

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.