0

I wrote in a recent topic about the title and description disappearing when the logo was present in my wordpress theme. I did have helpful script by Tony from this forum which solved the problem. I still had a problem with the title and description lining up with the logo as shown below.

Image 1

This image shows half of the header so the title (My Site) is in the middle of the header and the description (Just another WordPress Site) is under the logo.

I need the title and description to line up next to the logo on the right side as shown below.

Image 2

I wrote Tony back about this issue and tried to add the CSS for the logo, title and description, and it scrambled the code. So without seeing the themes CSS, he sub-jested this CSS using the flex feature as shown below.

.site-branding{
     display:flex;
     align-items:center;
     justify-content:flex-start;
     flex-direction:row;
     width:100%;
}

.logo-container{
     width:35%;
}

.title-container{
     width:65%;
     display:flex;
     align-items:flex-start;
     justify-content:flex-start;
     flex-direction:column;
}

.title-container > .hotwp-site-title,
    .title-container > .hotwp-site-description{
     display:block;
     width:100%;
}

Sorry about the long codes, but I had to improvise. Tony wrote below it saying "Haven't tested the CSS but that's the general idea."

I did find away to add the whole header CSS so it is readable shown below.

#hotwp-header{
    clear:both;
    margin:0 auto;
    padding:0;
    border-bottom:none !important;
    position:relative;
    z-index:1;
}

.hotwp-head-content{
    margin:0 auto;
    padding:0;
    position:relative;
    position:relative;
    z-index:98;
    overflow:hidden;
    background:#fff;
}

.hotwp-header-image{
    margin:0 0 0 0;
}

.hotwp-header-img-link{
    display:block;
}

.hotwp-header-img{
    display:block;
    margin:0 auto;
}

.hotwp-header-inside{
    padding:10px 0;
    overflow:hidden;
}

#hotwp-logo{
    margin:5px 0px 5px 0px;
    float:left;
    width:25%;
}

.hotwp-logo-img-link{
    display:block;
}

.hotwp-logo-img{
    display:block;
    padding:0;
    margin:0;
}

.hotwp-site-title{
    font:normal bold 24px 'Playfair Display',Arial,Helvetica,sans-serif;
    margin:0 0 15px 0 !important;
    line-height:1 !important;
    color:#333333;
}

.hotwp-site-title a{
    color:#333333;
    text-decoration:none;
}

.hotwp-site-description{
    font:normal normal 13px Domine,Arial,Helvetica,sans-serif;
    line-height:1 !important;
    color:#333333;
}

.hotwp-header-banner #hotwp-logo{
    width:41%;
}

.hotwp-header-search #hotwp-logo{
    width:71%;
}

.hotwp-header-full #hotwp-logo{
    margin:5px 0px 10px 0px;
    float:none;
    width:100%;
    text-align:center;
}

.hotwp-header-full .hotwp-logo-img{
    display:block;
    padding:0;
    margin:0 auto;
}

@media only screen and (max-width: 1112px) {
    #hotwp-logo{
    margin:5px 0px 10px 0px;
    float:none;
    width:100% !important;
    text-align:center;
}

.hotwp-logo-img{
    display:block;
    padding:0;
    margin:0 auto;
}

#hotwp-header-banner{
    float:none;
    width:100% !important;
    text-align:center;
}

#hotwp-header-banner img{
    margin:0 auto;
}

One thing I noticed about this header, the theme's header, there is no title and description container. I hope Tony or someone can help me solve this. Thank you!

1
  • Thank you. Looks better. How did you do that? – Ricky Ritchey Oct 28 '20 at 23:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.