WordPress.org

Ready to get started?Download WordPress

Forums

Spun
Center header (5 posts)

  1. shmay
    Member
    Posted 9 months ago #

    Hello,

    I am interested in center my header image, I have tried several things, still not working...

    This is what I've recently tried, the header is well centered on mobile but isn't on firefox :

    #masthead img {
    float: center;
    margin-right: 1em;
    width: auto;
    max-height: 75px;

    Do you have any solution ?

    What is more, I would like that "sample page" and "home" menu displays under my center header.

    I hope you get what I am looking for,

    Thank you in advance !

  2. Andrew
    Forum Moderator
    Posted 9 months ago #

    Can you provide a link to your site?
    Btw the CSS "float" property only accepts certain values and "center" is not one of them http://www.w3schools.com/css/css_float.asp

  3. shmay
    Member
    Posted 9 months ago #

  4. Andrew
    Forum Moderator
    Posted 9 months ago #

    Are you sure that's the right site? I don't see the Spun theme activated.

  5. shmay
    Member
    Posted 9 months ago #

    I can't explain why you can't see it.

    I have changed CSS "float" value, this is what I have now :

    /* =Header
    ----------------------------------------------- */

    #masthead {
    clear: both;
    display: block;
    min-height: 30px;
    opacity: .2;
    padding: 30px 0;
    position: relative;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    width: 100%;
    }
    #masthead:hover {
    opacity: 1;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    }
    #masthead:before,
    #masthead:after {
    content: "";
    display: table;
    }
    #masthead:after {
    clear: both;
    }
    #masthead img {
    float: left;
    margin-right: 1em;
    width: auto;
    max-height: 75px;
    }
    #masthead hgroup {
    color: #999;
    float: left;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    width: 25%;
    }
    #masthead hgroup a {
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    }
    .site-description {
    background: #444;
    border-radius: 180px;
    color: #999;
    display: none;
    float: left;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1;
    margin: 10px;
    padding: 20px;
    width: 140px;
    height: 140px;
    text-align: center;
    word-wrap: break-word;
    }
    .site-title {
    font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
    font-size: 24px;
    font-size: 2.4rem;
    font-style: italic;
    font-weight: normal;
    line-height: 1em;
    margin: 0;
    text-transform: none;
    }
    .site-title a {
    color: #999;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags