Center Logo & Button Styling

  • Author
    Posts
  • #128670

    kerryandersen
    Member
    Original poster

    1. I would like my logo to center-align when the rest of the navigation center-aligns. It looks very odd when the logo is left-aligned and everything else is centered. There is a previous post on this topic, but I don’t see a resolution.

    2. How can I stylize the submit button on my Contact page? I would like the text on that button to be white, rather than black.

    The blog I need help with is: kerryandersen.com

    #128783

    scottrrollo
    Theme Author

    Hey there, Kerry πŸ‘‹ Happy to help!

    I just checked your site and it sure seems the logo centers when the menu does. Are you seeing something different? What device are you using?

    To set your contact form button to white, try this snippet:

    .contact-submit input[type=submit] {
        color: #fff !important;
    }

    I hope this helps! Let us know how it works for you πŸ˜€

    #128841

    kerryandersen
    Member
    Original poster

    The snippet worked. Thank you. The logo aligns left. It may not have appeared that way when you looked at it because I was trying it with a larger logo. I don’t want the logo that big. I replaced the logo with the size I’d like it, and in tablet view or phone view, the logo aligns to the left while everything else is centered. Will you please take another look? Also, this logo simply uses a Google font. So, if there is way to simply use a Google font for my “Site Title”, I’d be okay with that option, too.

    #128849

    scottrrollo
    Theme Author

    Ah, okay! That makes sense, Kerry.

    To center align that logo, try this snippet:

    @media only screen and (max-width: 800px)  {
        .branding img {
            margin: 0 auto;
        }
    }

    Let us know if that’s what you’re after πŸ˜€

    #128888

    kerryandersen
    Member
    Original poster

    It works perfectly! Thank you. I have one more similar question. Pages that use the “portfolio” template align the page heading to the left in the “tablet” and “phone” view. I would like those pages to have the page heading centered in those views, just like the non-portfolio pages. Is there a snippet that will do that? (I would still like the heading left-aligned in the “desktop” view. Essentially, I just want all of the pages to treat the heading the same for consistency.)

    #128920

    scottrrollo
    Theme Author

    Glad to help, Kerry! πŸ˜€

    To center those titles, please try this:

    @media only screen and (max-width: 800px)  {
        .single h2.title {
            text-align: center;
        }
    }

    I hope this helps!

    #128950

    kerryandersen
    Member
    Original poster

    I added that code in the CSS field and the titles still do not center in “tablet” or “phone” view for the portfolio pages. Any other ideas?

    #128965

    scottrrollo
    Theme Author

    Oh! Sorry about that, Kerry.

    It really should work, but let’s try this instead please:

    @media only screen and (max-width: 800px)  {
        .single h2.title {
            text-align: center !important;
        }
    }

    Fingers crossed that does the trick πŸ˜€

    #128972

    kerryandersen
    Member
    Original poster

    It still doesn’t work. I believe it is because the entire field where you enter the page “Title” doesn’t display on portfolio pages. I had to fake a heading by adding one to the body of the page. For example, if you look at the following page, it doesn’t display the “Brochures” title. https://kerryandersen.com/brochures/ Can this be fixed so the page title displays on portfolio pages using the given field?

    #128973

    scottrrollo
    Theme Author

    Hey again, Kerry! First up, I want to say sorry this little change hasn’t been easier!

    I actually just double-checked all of your pages and the titles are center-aligning for me (other than the actual portfolio grid which cannot have a title). I have a hunch you might be seeing a cached (Browser saved) version of your website. Would you please try clearing your browser cache and see if that helps?

    #128989

    kerryandersen
    Member
    Original poster

    You are correct. That was my concern. All pages have the title centered except for the portfolio pages. Why can’t the portfolio pages have a title? There is a field for a title.

    #128990

    scottrrollo
    Theme Author

    Glad to hear that, Kerry!

    When we designed Portfolio, we thought it was clear enough what the portfolio was about without a title simply by looking at the images themselves. So to keep the design nice and simple, we removed it. Sorry that’s not how you’d like it! I wish there was a simple option to switch it on, but we actually didn’t even put the title in the code.

The topic ‘Center Logo & Button Styling’ is closed to new replies.