Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 27, 2018 at 12:29 pm #933598
    tokenofhon

    Hi, a couple issues im having optimising for mobile:

    I’d like to hide the top bar entirely on mobile (background color, email info, social icons etc)

    I tried this code:

    @media only screen and (max-width: 768px) {
    #header_meta { display: none !important; }}

    But the tan bg colour still remains (so do the social icons).

    Also on mobile since the logo is set to full width, the burger menu sits really odd, how can i get it to sit nicely next to the logo (make logo shift left a bit)

    And finally, i’m trying to hide some of the whitespace elements ive created on mobile, however when i go to the element and “screen options” everytime i tick the boxes i want and hit save, nothing happens, and if i go back to the element the boxes are unticked?

    March 27, 2018 at 1:42 pm #933662
    Mike

    Hey tokenofhon,
    For a transparent header on mobile, Try this code in the General Styling > Quick CSS field:

     @media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, 
.av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
}}

    it seems to work, but I don’t see your social icons in mobile.
    To shift your logo up a little away from your burger menu, please try:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
    vertical-align: top!important; 
}}

    I believe the white spaces you are referring to are above and below the “shop our range” so I added a custom class “mws” to work with this code:

    @media only screen and (max-width: 767px) {
.mws {display:none !important;
}}

    Since I had your site open I added all of these codes for you in Enfold Theme Options > General Styling > Quick CSS field, feel free to change or remove if you wish.
    Please clear your browser cache and check.

    Best regards,
    Mike

    April 15, 2018 at 12:12 pm #942173
    tokenofhon

    Thanks mike,

    Do you know why on pages other than my home page the tan color is showing up behind the logo instead of being transparent so the fern BG shows through? (like on the home page)

    April 15, 2018 at 12:34 pm #942180
    tokenofhon

    Nevermind, found it (completely forgot about the layout section haha)

    April 15, 2018 at 3:13 pm #942211
    Mike

    Hi,
    Thank you for sharing your solution, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Header top bar hide on mobile’ is closed to new replies.