Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 21, 2016 at 1:34 am #651166
    spleeky

    Hi I have a problem on my site that when the sticky header takes effect the logo is positioned on the bottom of it and not in the center, i tried adding padding to the bottom of it, after having inspected the css and came up with this:

    .header-scrolled .logo img {padding-bottom:10px;}

    Although this added padding the logo shrunk.

    I also tried this

    .header-scrolled .logo img (vertical-align: middle !important;)

    but that didnt do anything.

    Can you tell me how i can center the logo vertically on the sticky header please.

    June 22, 2016 at 7:41 am #651954
    Jordan

    Hey spleeky,

    Thanks for getting in touch with us!

    The simpler thing to do would be to adjust the height of the logo container a bit. Note also that the logo is shrinking when padding is added because it cannot go up to the other top bar as that is another div.

    Please try the following CSS:

    .container.av-logo-container {
    height: 65px !important;
}

    Let me know if that helps.

    Best regards,
    Jordan

    July 19, 2016 at 1:38 pm #662469
    spleeky

    Hi thank you for your advice,

    this did not work unfortunately, I have included a screenshot to show the effect when this code is applied in the private area,

    thanks

    • This reply was modified 8 years, 4 months ago by spleeky.
    July 22, 2016 at 5:04 am #663669
    Ismael

    Hi,

    Please add this in the Quick CSS field:

    #top .logo img {
    top: 20px;
}

#top .header-scrolled .logo img {
    top: 2px;
    padding: 7px 0;
}

    Best regards,
    Ismael

    July 26, 2016 at 1:48 am #665056
    spleeky

    Hey Jordan and Ismael, thanks for the help.

    We have certainly got much closer now.

    When I add this

    .container.av-logo-container {
    height: 65px !important;
}

    The grey bar appears as posted above in the picture of my previous reply.

    However by adding the code Ismael suggested and modifying the padding slightly, now the logo is displaying centered vertically on the main navigation which is great. 

    #top .logo img {
    top: 15px;
}

    But when i add this code: 

    
#top .header-scrolled .logo img {
    top: 2px;
    padding: 7px 0;
}

    The logo is still shrinking when the navigation bar is scrolled, here is the login details to the site currently. Any idea how i can fix the scrolled logo so that it does not reduce in size like it is currently. My current style.css in my child theme has this code added, from this thread: 

    
#top .logo img {
    top: 15px;
}

#top .header-scrolled .logo img {
    top: 2px;
    padding: 7px 0;
}

    When the header is scrolled, I would like the logo to be centered vertically in the scrolled navbar and for the padding above the menu items to be equal at top and bottom like it is on the main header.

    • This reply was modified 8 years, 4 months ago by spleeky.
    July 28, 2016 at 2:59 am #666017
    Ismael

    Hi,

    The logo is still shrinking when the navigation bar is scrolled, here is the login details to the site currently. Any idea how i can fix the scrolled logo so that it does not reduce in size like it is currently. My current style.css in my child theme has this code added, from this thread:

    The logo should shrink because the header container will shrink on scroll. If the logo doesn’t shrink, it will overflow outside the header container.

    Best regards,
    Ismael

    August 3, 2016 at 9:49 pm #668286
    spleeky

    Hi Ismael please see the site below in the private data, when i scroll i want the logo centered in the shrunken scroll bar, its too far towards the bottom of the white bar at the moment, how can i achieve this?

    The earlier suggestion to add padding to the graphic itself in the file, did not work, because then on scroll it is too small that was what i was trying to express in my previous comment,

    thanks

    • This reply was modified 8 years, 3 months ago by spleeky.
    August 6, 2016 at 8:05 am #669262
    Rikard

    Hi,

    Please try this in Quick CSS:

    #top .header-scrolled .logo img {
margin-top: 0px !important;
}

    Best regards,
    Rikard

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