Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #822016

    Hi.

    I’ve got a problem with enfold 4.1.1.
    On a phone or a tablet in vertical way, my logo and burger menu are overlapping each other.
    Thats also because with the update, my social media icons in the mainheader are visible on phone and tablet. Never was before.
    I’ve never experienced this problems with version 4.0.7. Example: https://www.dropbox.com/s/3iakfhyiceyy2v3/screenshot.png?dl=0

    Can I disable/hide the social buttons only in phone and tabled, On pc they must be visable…?
    OR maybe better, move the logo to the left side so everything fits…

    Can I disable/hide the search function on the mobile version…?

    Thank you.

    #822310

    Hey Panms,

    Please try the following in Quick CSS under Enfold->General Styling to move the logo to the left on mobile devices:

    @media only screen and (max-width: 1024px) {
    .html_header_top.html_logo_center .logo {
        left: 0% !important;
        -webkit-transform: translate(0%, 0) !important;
        -ms-transform: translate(0%, 0) !important;
        transform: translate(0%, 0) !important;
    }
    }

    Best regards,
    Rikard

    #822385

    Thank you Rikard.

    On an Ipad or tablet it looks okay now.
    On a phone on horizontal mode its still overlapping, Maybe because the logo is a long one.

    Is it possible to hide the social icons in the header only in the phone version? That would solve the problem to I think.
    Is it possible to hide the search function on mobile devices?

    Thanks,
    Maarten

    #822390

    Hi,

    Would you be able to enable right click/browser inspection on your site so we can see the proper tags we need to give you the right css to address your issue?

    Best regards,
    Jordan Shannon

    #822400

    Done :-)

    #822412

    Hi,

    Try adding the following to quick css:

    @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) {
    .noLightbox.social_bookmarks.icon_count_5{
    display:none!important;
    }
    
    .avia-menu.av_menu_icon_beside{
    border-right-style:none!important;
    }
    
    #top #menu-item-search {
        display: none!important;
    }
    
    }

    Let me know if this works.

    Best regards,
    Jordan Shannon

    #822419

    Yes!! It works! You’re great. Thank you!

    Is it also possible to hide the searchicon on phone in vertical mode?

    Best Regards,
    Maarten

    #822425

    Hi,

    Add the following:

    @media only screen and (max-width: 767px) {
    #top #menu-item-search {
    display: none!important;
    }
    }

    Best regards,
    Jordan Shannon

    #822440

    Hi, it seems the last code isn’t working….
    Is it possible to hide the searchicon on tablet in vertical mode?

    Best Regards
    Maarten

    #822454

    Hi,

    This should work for tablets:

    
    @media only screen and (max-width: 1024px) {
    #top #menu-item-search {
    display: none!important;
    }
    }

    Best regards,
    Jordan Shannon

    #822959

    Workshop perfectly!!!
    Thank you very much!

    Best regards
    Maarten

    #823139

    Now i See that the tablet-version is oké. But on the phone the changes aren’t There anymore… :-(

    Please help,
    Maarten

    #823315

    Hi,

    Can you please add a screenshot?

    Best regards,
    Jordan Shannon

    #823747

    Hi Jordan.

    Here is a screenshot.
    https://www.dropbox.com/s/xjoe52hrfzxncle/Foto%2019-07-17%2008%2021%2034.png?dl=0

    Best regards,
    Maarten

    #823854

    Hi Maarten,

    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: 1024px) and (min-width: 768px) {
    	.html_header_top.html_logo_center .logo {
            left: 26%;
        }
    }
    @media only screen and (max-width: 767px) {
    	.responsive .logo img {
    	    width: 60%;
    	}
    }
    @media only screen and (max-width: 450px) {
    	.responsive .logo img {
    	    width: 80%;
    	}
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #829662

    Hi Victoria.

    I had a little vacation.
    I’ve testen and I removed the old code.
    It works! Perfect.
    Case closed :-)

    Best regards,
    Maarten.

    #829674

    Hi,

    I’m glad you were able to get this fixed. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Header/Logo problem Enfold Logo 4.1.1. on phone and tables’ is closed to new replies.