Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 18, 2020 at 2:42 pm #1231476
    Tarakbc

    Hi!

    I would like to know if it’s possible to do the following:
    1) On a mobile device:
    Prevent the header from being displayed so that the image covers the whole screen. Instead we want to have only the three horizontal lines for the menu at the top so that our users can still access the menu.

    2) Whilst at the same time, on a pc / laptop:
    Choosing the setting “header is invisible and appears only once user scrolls down”.

    Many thanks!

    July 20, 2020 at 3:11 pm #1231744
    Victoria

    Hey Tarakbc,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    July 20, 2020 at 4:38 pm #1231792
    Tarakbc

    Hi Victoria,

    Thanks for your reply.

    Please see the link for the mock-up below:

    The mock-up is for our new homepage, viewed on a mobile device. I.e. we want the image to cover the whole page but still for the user to access the menu via the three horizontal lines in the top right.

    At the same time on a pc / laptop we would like to have the following setting:
    “header is invisible and appears only once user scrolls down”

    July 20, 2020 at 8:29 pm #1231843
    Victoria

    Hi Tarakbc,

    I don’t see the header at all, even on desktop.

    You need to add the menu and the header first.

    Best regards,
    Victoria

    July 20, 2020 at 9:35 pm #1231875
    Tarakbc

    Hi!

    OK, I have changed the setting for the header back to ““header is invisible and appears only once user scrolls down”.

    The appearance we have now is fine for the laptop / pc. And the mock-up I attached in my previous post shows what we would like to accomplish for the mobile device,
    i.e.
    – no header or logo
    – the image goes to the top of the page
    – the menu can be accessed by three small horizontal lines in the top right corner.

    Let me know if this makes sense now!

    Thank a lot for looking into this. It’s much appreciated :)

    July 22, 2020 at 3:48 pm #1232267
    Victoria

    Hi Tarakbc,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 989px) {
  #top #wrap_all .av_header_transparency {
      background-color: transparent;
      height: 0 !important;
  }
 #top #wrap_all .av_header_transparency .logo {
  display: none;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 22, 2020 at 3:59 pm #1232275
    Tarakbc

    Hi Victoria,

    Thanks very much for your reply. That worked great!

    However, there is one more small adjustment I would like to make. The three horizontal lines are a bit faint. I think dark grey or black would make them more visible.

    How do I play around with the color of this icon?

    July 22, 2020 at 7:19 pm #1232351
    Victoria

    Hi Tarakbc,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.header_color .av-hamburger-inner,
.header_color .av-hamburger-inner::before,
.header_color .av-hamburger-inner::after {
    background-color: #b61414;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 22, 2020 at 9:38 pm #1232423
    Tarakbc

    Perfect! Thanks for you help!

    July 22, 2020 at 10:56 pm #1232443
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘hide header and still have access to menu via three horizontal lines’ is closed to new replies.