Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 18, 2014 at 6:00 am #369859
    kork

    I’ve enjoyed working with Enfold for a while, but with the recent change from the select box style mobile menu to the “slide out from the side” has left something to be desired for the mobile experience. Clients don’t like “menu” buttons overlapping their logo.

    So, I’m looking for an alternate mobile menu and I’ve got everything working well with one exception.

    I can’t for the life of me get the logo centred on 767px and below.

    I’ve added:

    @media only screen and (max-width: 767px)
    #top #advanced_menu_toggle {
    display: none;
    }

    to the css and that hides the menu, but I can’t get the logo centred???

    Any ideas? I’ve searched through the forum and other suggestions don’t work.

    • This topic was modified 10 years, 10 months ago by kork.
    December 18, 2014 at 4:21 pm #370012
    Yigit

    Hey kork!

    Can you post the link to your website please?

    Cheers!
    Yigit

    December 18, 2014 at 5:28 pm #370080
    kork
    This reply has been marked as private.
    December 18, 2014 at 5:35 pm #370090
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .responsive #header_main .inner-container .logo {
margin: auto;
display: block; }

    Cheers!
    Yigit

    December 18, 2014 at 5:46 pm #370102
    kork

    I tried that before, didn’t work. I just added it back as suggested above, still didn’t do it.

    December 18, 2014 at 5:50 pm #370109
    Yigit

    Hi!

    Please try centering manually with following code then

    @media only screen and (max-width: 480px) {
.logo { position: relative; left: 20px; }}

    Best regards,
    Yigit

    December 18, 2014 at 6:16 pm #370121
    kork

    It’s in there, no change.

    December 18, 2014 at 11:16 pm #370278
    Ismael

    Hey!

    Please replace the code with this:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
display: inline-block;
vertical-align: middle;
}

.responsive.html_header_top.html_logo_center .logo {
text-align: center;
}
}

    Remove browser cache then reload the page.

    Cheers!
    Ismael

    December 19, 2014 at 2:23 am #370392
    kork

    Hi Ismael,

    I had to add width: 100%; to the .responsive.html_header_top.html_logo_center .logo class and it worked.

    Thanks!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Centering logo for mobile view’ is closed to new replies.