Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #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.
    Is that possible?
    Or will I need to change all of the CSS to only apply to desktop –
    Many thanks!!


    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.


    Best regards,


    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?

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

You must be logged in to reply to this topic.