Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 3, 2019 at 10:09 pm #1074051
    chris_naples

    Hi, I’m looking for help with css “vertical align middle” for my text logo in my header and have it responsive or “viewport width” so that my header doesn’t increase the header height and wrap my text. I’m trying to avoid using exact alignment values hopefully to accomplish this.

    I’m following the Enfold Documentation https://kriesi.at/documentation/enfold/logo/#text-logo-with-subtext

    This code does not seem to work within Quick CSS?

    /* Text logo styling */

    #top .logo,
    #top .logo a {
    overflow: visible;
    }

    #top .logo {
    color: #ffffff;
    font-size: 20px
    display: flex;
    align-items: center;
    position: absolute;
    vertical-align: middle;
    }

    /* Hide subtext on scroll */
    #header.header-scrolled-full .subtext {
    display: none;
    }

    I appreciate your help!
    Chris

    March 5, 2019 at 10:42 pm #1075127
    Victoria

    Hey chris_naples,

    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

    
.logo h1 {
    padding-top: 10px;
    line-height: 65px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 6, 2019 at 7:15 pm #1075592
    chris_naples

    Hi Victoria,

    Thank you, this will do the trick! Just curious for future reference, using the “vertical-align: middle;” CSS code is not supported?

    Cheers,
    Chris

    March 8, 2019 at 4:46 am #1076213
    Rikard

    Hi Chris,

    All CSS is supported in the theme, it’s no different from any other theme. Looking at your code I don’t think that command will have any effect on an element which is places in an absolute position though.

    Best regards,
    Rikard

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