Logo on the right side - by richiekanoo - on WordPress WooCommerce support

This topic has 13 replies, 3 voices, and was last updated 8 years, 1 months ago ago by Jack Richardson

  • Avatar: richiekanoo
    richiekanoo
    Participant
    March 1, 2016 at 16:36

    Hello any css advices how to put my logo on the right side of the header? there seems no option in the header options.

    As well my logo is vertical. So the whole menu points drop to far down… how can i make that they stick on the top and dont drop down into the middle of my vertical logo?

    Thanks for the help

    Richie

    12 Answers
    Avatar: stan
    Stan Russell
    Participant
    March 1, 2016 at 16:47

    Hello richiekanoo,

    please provide us with link to your site.

    Regards,
    Stan Russell.

    Avatar: richiekanoo
    richiekanoo
    Participant
    March 1, 2016 at 17:01

    See the link below: (private content)

    Please, contact administrator
    for this information.
    Avatar: stan
    Stan Russell
    Participant
    March 2, 2016 at 11:25

    Hello richiekanoo,

    would you kindly show on screenshot where exactly do you want to place your logo and we will provide you with needed css code.
    Thank you for understanding.

    Regards,
    Stan Russell.

    Avatar: richiekanoo
    richiekanoo
    Participant
    March 2, 2016 at 11:52

    Hey plz find the screenshot here (private)

    1. I would like to place the logo on the right hand of the menu
    2. The menu should still stick to the top.

    thx guys

    Please, contact administrator
    for this information.
    Avatar: stan
    Stan Russell
    Participant
    March 2, 2016 at 14:28

    Hello richiekanoo,

    please add following css code to your Global css in Theme options > Custom css:

    @media screen and (min-width:1200px){ 
    .navbar{display:inline-flex!important;width:100%;padding-top:0px!important}
    .tbs{width:80%}
    .header-logo{float:right!important; width:10% }
    }

    Regards,
    Stan Russell.

    Avatar: richiekanoo
    richiekanoo
    Participant
    March 2, 2016 at 15:32

    You guys are great!
    can i do the same for the floating menu?
    so far it pushed the logo into the middle in the floating menu. would be nice to have it as well on the right side!

    THANKS so much!

    Avatar: richiekanoo
    richiekanoo
    Participant
    March 3, 2016 at 12:21

    Another thing:
    I saw your code works perfetly on chrome and safari. Unfortunately on Firefox it pushes the logo to the right, but it doesn’t put it all the way on the right side.
    thx for help!

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 4, 2016 at 09:58

    Hello,

    Please try to add this code in Theme Options > Custom CSS > Custom CSS for desktop:

    .fixed-header-area .navbar-right .navbar-right {
        float: none !important;
        margin-left: -20% !important;
    }
    .fixed-header-area .collapse {
       float: none;
       width: 700px !important;
    }
    .fixed-header-area .header-logo {
         position: absolute;
         left: 80%;
    }

    Best regards,
    Jack Richardson.

    Avatar: richiekanoo
    richiekanoo
    Participant
    March 7, 2016 at 17:28

    Thx guys.

    Last little issues:
    1. The cart icon in the floating menu and on mobile version is badly displaced
    2. In the firefox browser, the logo won’t show up on the right side. U guys have an solution?
    thx so much

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 9, 2016 at 10:28

    Hello,

    Please provide us with WP Dashboard credentials in private content.

    Best regards,
    Jack Richardson.

    Avatar: richiekanoo
    richiekanoo
    Participant
    March 9, 2016 at 13:55

    Here we go:

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 9, 2016 at 18:02

    Hello,

    I’ve edited previously provided css code to the following:

    .navbar {
       width: 100%;
       padding-top: 0px !important;
    }
    
    .tbs {
       width: 80%;
       display: inherit;
    }
    
    .header-logo {
       float: right !important; 
       width: 10%;
    }
    
    .navbar-right {
       display: block;
    }
    
    .fixed-header-area .navbar-right .navbar-right {
        float: none !important;
        margin-left: -20% !important;
        display: table-cell;
        padding-top: 25px;
    }
    .fixed-header-area .collapse {
       float: none;
       width: 700px !important;
       padding-top: 16px;
    }
    .fixed-header-area .header-logo {
         position: absolute;
         left: 80%;
    }

    Please check the site now.

    Best regards,
    Jack Richardson.

  • Viewing 13 results - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.