• Resolved nowlanjor

    (@nowlanjor)


    Hi,

    I apologize if this post is not the appropriate format. It is my first time posting. I have been pulling out my hair trying to fix this issue.

    I removed my site header on my responsive site (caused a lot of issues) and tried replacing it with a custom logo. I have tried all of the CSS I found in the forums and elsewhere online and it still will not center.

    .woocommerce-page .page-title {
      display: none;
    }
    #access {
    margin-bottom: 0;
    }
    body.home #content {
    margin-top: -190px;
    }
    body.post-type-archive-product #content {
    	margin-top: -150px;
    }
    .page-id-12 #content {
    	margin-top: -50px;
    }
    .page-id-5 #content {
    	margin-top:-50px;
    }
    .storefront-recent-products {
      margin-top: -50px;
    	margin-bottom: 0;
    }
    .site-branding {
    	margin-bottom: -40px
    }
    @media screen and (max-width: 1112px) {Img.wp-image-191 {display:none;}}
    @media screen and (max-width: 812px) {.site-branding {
    	margin: 0 auto;}
    	button.menu-toggle {
        margin: 0 auto;
        float: none;
    		display: block;}
    .woocommerce-pagination {
    	margin-top: 50px;
    	}
    	header#masthead {
    background-image: url(cropped-Post-and-Stud-6.png);
    		background: none !important;}}
    .storefront-handheld-footer-bar ul li.home > a:before {
    	content: "\f015";
    }
    header#masthead {
    background-image: url(cropped-Post-and-Stud-6.png);
    			background-repeat: no-repeat;
    	background-position: left;
    	}
    #site-navigation {
        width: 100%;
        display: inline-block;
    }
    @media screen and (min-width: 812px) {.custom-logo {display: none;}}

    I want to have the Post and Stud text centered above the toggle menu. The site is still in the building stages, so unsure how to provide the forum with a preview of the “live site”.

    Here is a screen shot.

    Thanks,

    Jordan

    • This topic was modified 7 years, 2 months ago by Jan Dembowski.
    • This topic was modified 7 years, 2 months ago by Jan Dembowski. Reason: Fixed formatting
Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi, looks like the screenshot didn’t get added. Can you upload it to snag.gy or imgur or similar and share the link? May be able to help you further once I can see what you’re trying to do.

    Thread Starter nowlanjor

    (@nowlanjor)

    Hi Jarret,

    Thanks for the reply.

    Here’s the screen shot. If I can figure out how to provide you with an actual site preview, I can provide that as well.

    View post on imgur.com

    • This reply was modified 7 years, 2 months ago by nowlanjor.

    I think this CSS will work for what you want

    .woocommerce-active .site-branding {
        float: none;
        text-align: center;
    }
    Thread Starter nowlanjor

    (@nowlanjor)

    I have tried text-align in many different ways and it doesn’t seem to work. The little pencil icon moves (with the Edit Section text), but the actual logo doesn’t follow.

    You tried using that exact code I provided? You have to make sure that float: none; is added as well as the theme tries to float it left by default. It worked for me when testing on my test install.

    If it isn’t working for you, without having access to the live site its hard to say if there is other code causing a conflict.

    Thread Starter nowlanjor

    (@nowlanjor)

    Yeah, like I said, the pencil icon to edit moves, but the logo is stuck.

    I launched the site (not all pages published and not done finished with layout yet) so you can inspect. I can’t find any code that seems to be overriding it.

    https://postandstud.com

    Try adding the following CSS along with my previous from above

    .woocommerce-active .site-branding img {
        display: inline-block;
    }
    Thread Starter nowlanjor

    (@nowlanjor)

    That seems to have worked. Thanks, Jarret. I will double check on my desktop and then (hopefully) mark this thread as resolved.

    Site back in private mode.

    Hi Jordan,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Center Custom Logo’ is closed to new replies.