Home Forums Weaver Xtreme Theme How to center the Logo in the Header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #74423
    Rehnfield
    Participant

    Hey,

    i tried several hours to just align the custom Logo to the center in the header. When i use the left in the Site title and tagline Settings i can manually adjust it by using site title left margin, but then its not responsive for mobile view.

    i tried also using css like

    #site-title img.site-title-logo{margin-left:auto;margin-right:auto;}  or “align:center;”

    but it didnt work.

    VIDEOS

    I couldn’t find any answers here in the forum or via google. Maybe the problem is just too easy so nobody asked yet

    thank you in advance!

    #74424
    User
    Moderator

    @Rehnfield

    Try:

    #site-title img.site-title-logo{display:block;margin:0 auto;}

    Regards!

     

    #74460
    Rehnfield
    Participant

    Wow, that worked perfectly fine! Thank you so much!
    im also wondering how to make the logo smaller on mobile devices. i tried

    is-mobile #site-title img.site-title-logo{max-width:50%;}

    in the same place, but it just doesnt seem to work.

    #74461
    User
    Moderator

    @Rehnfield

    If you only want a smaller size on phone, use .is-phone instead of .is-mobile and instead of {max-width:50%;} try {height:30.0em;}  or  {height:30px;}

    Regards!

    #74465
    Rehnfield
    Participant

    Hm, that doenst seem to work on Phone. My current CSS Code is:

    #site-title img.site-title-logo{display:block;margin:0 auto;}
    .is-phone #site-title img.site-title-logo{height:10px;}

    i now have the code written in Design->Weaver Xtreme Admin -> Main Options -> Font & Custom -> Custom CSS-Rules

     

    #74466
    Rehnfield
    Participant

    Hm, that doenst seem to work on Phone. My current CSS Code is:

    .is-phone #site-title img.site-title-logo{height:10px;}

    i now have the code written in Design->Weaver Xtreme Admin -> Main Options -> Font & Custom -> Custom CSS-Rules

     

    #74467
    scrambler
    Moderator

    Strange, because I do not see the rule in your custom CSS Rules.

    If the rule is really in the Theme Custom CSS Rule box, Try clearing all caches (Plugin, cloudflare…)

    Also paste the block of rules from your theme Custom CSS Rule box here, at least the 2 before and the two after.

    Right now here is what I see around the first rule discussed

    .custom-logo-link {
    display: block;
    float: left;
    margin-right: 2em;
    max-width: 100%;
    margin-top: 1%;
    margin-left: 1%
    }

    #site-title img.site-title-logo {
    height: auto;
    padding-right: 1%
    }

    .custom-logo {
    max-width: 100%
    }

    #74468
    User
    Moderator

    The only is-phone use I see is:

    .is-phone #site-title img.site-title-logo{height:150px}

    at the end of < style id ='weaverx-style-sheet-inline-css' type='text/css' >

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.