Adding logo to topbar and removing old logo

  • awhitesell

    (@awhitesell)


    8 years, 2 months ago

    I have a couple questions in regards to my site at http://www.shopmadamarket.com.

    The first thing I wanted to do was add my logo to the topbar and center it. I have enabled the widget area in right of topbar. I then added the following CSS. 

    .kad-topbar-right {
width: 100%;
}

    I have set up a child theme and am using FireBug. It looks like I need to center the img within the div class=”kad_img_upload_widget.” I think I am close, but I am not quite sure how to do this.

    Next, I want to remove the old logo. I believe I could safely remove the following HTML.

    <div id="logo" class="logocase">
   <a class="brand logofont" href="https://www.shopmadamarket.com/"> MadaMarket </a>
</div>

    While I can see the locations of the CSS files, I am unsure which file this HTML lives.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Ritner – Kadence WP

    (@britner)

    8 years, 2 months ago

    Hey,
    I would suggest using the theme options > advanced styling > custom css box for css.

    Add this to center the logo:

    .kad-topbar-right .kad_img_upload_widget {
    text-align: center;
}

    and you can remove the site title/logo with this css:

    #logo {
    display: none;
}

    Kadence Themes

    Thread Starter awhitesell

    (@awhitesell)

    8 years, 2 months ago

    Thanks for the suggestion and CSS.

    Thread Starter awhitesell

    (@awhitesell)

    8 years, 2 months ago

    I took it one step further as you can see at https://www.shopmadamarket.com/.

    I have a left column with social media icons, middle column with a logo and a right column with the shopping cart. However, I cannot get the left and right columns to horizontally center like the logo. I want to do this, so the two columns do not look right justified on a small device. Note that the .kad-topbar-* classes are reversed. I’ve tried:

    .kad-topbar-left .kad-cart-total {
text-align: center;
}

.kad-topbar-right .topbar_social {
text-align: center;
}

    I’d also like to vertically align them with the logo, if that’s possible?

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    8 years, 2 months ago

    Hey,
    1. You can add this css:

    .topbarmenu ul li {
    display: inline-block;
    float: none;
}
.kad-topbar-right, .kad-topbar-left {
    text-align: center;
    }

.kad-topbar-left .topbarmenu, .kad-topbar-left .topbarmenu ul, .kad-topbar-left .kad-cart-total {
    float: none;
}

    2. You can add this:

    @media (min-width: 768px){
.kad-topbar-right, .kad-topbar-left {
    margin-top:76px;
    }
}

    Kadence Themes

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding logo to topbar and removing old logo’ is closed to new replies.