Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 16, 2018 at 6:07 pm #986024
    MadRhino

    Hey everybody,

    I’m working with a logo that’s only 80px x 45px and an icon style main menu.

    While the icon for the menu is centered vertically in the header (slim), the logo is not. Is there a way to have this logo vertically centered, just like the icon for the main menu.

    I found a few posts and tried some of the code, but it seems that it’s individual to each individual site.

    Many thanks for looking into that.

    July 16, 2018 at 11:20 pm #986145
    Nikko

    Hey MadRhino,

    Can you give us a link to your site? so we can take a closer look.

    Best regards,
    Nikko

    July 17, 2018 at 7:48 am #986285
    MadRhino
    This reply has been marked as private.
    July 17, 2018 at 1:53 pm #986414
    Rikard

    Hi Karl,

    Thanks for that. Please try this in Quick CSS:

    span.logo {
    margin-top: 30px;
}

    Best regards,
    Rikard

    July 17, 2018 at 6:59 pm #986586
    MadRhino

    Thanks Rikard, I very much appreciate you taking the time to look into.

    The code you provide, just like some that are provided in connection with other requests on the same subject, does add a 30px margin above the logo, it doesn’t quite center it though. This is much more evident, if you start on the homepage (with a transparent header) and start scrolling downwards. As the header turns white, you can see that the menu icon is perfectly centered vertically, whereas the logo is not.

    Call me a stickler for detail, but is there another way to go about this?

    Again, many thanks for your time and help.

    July 18, 2018 at 2:13 pm #986980
    Victoria

    Hi MadRhino,

    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

    
#top #wrap_all .header_color.av_header_transparency span.logo {
    margin-top: 30px;
}
.html_header_top.html_header_sticky #header span.logo {
    margin-top: 20px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 22, 2018 at 12:17 pm #988345
    MadRhino

    Thanks a lot Victoria, this works on the menu bar, but, if you start on a page with a transparent background, for instance on the home page, and you scroll down, the logo jumps upward, as it transitions from being displayed on a transparent background to the white background on the menu header. Isn’t there a way to center it vertically no matter where. Maybe it would help defining a fixed custom height for the menu header?

    Many thanks again, for looking into this.

    July 23, 2018 at 10:11 am #988628
    Nikko

    Hi MadRhino,

    Can you try to replace 30px to 20px to this code:

    #top #wrap_all .header_color.av_header_transparency span.logo {
    margin-top: 30px;
}

    Hope this helps.

    Best regards,
    Nikko

    July 23, 2018 at 10:43 am #988641
    MadRhino

    Perfect!

    Many thanks, Nikko.

    July 23, 2018 at 6:40 pm #988814
    Victoria

    Hi MadRhino,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.