Storefront – How to get Logo, Menu & Search to show in the Center

  • Resolved alexandraqb

    (@alexandraqb)


    5 years, 6 months ago

    Hi

    I’m wondering if anyone could offer some help and advice please?

    I’m slowly going crazy because I can not figure out how to place my Site Logo, Menu Links and Search Bar in the centre of the page.
    Like this: Example Of Website – Centre Menu & Logo

    Currently I am using the Storefront theme, which I love.
    However I’m finding this one custom edit beyond me.

    _________________

    I have searched this message board, yet nothing fixes my problem.
    I have disabled all my plug-ins, and custom codes in-case of any conflicts, yet nothing will work for me 100%

    _________________

    I’m currently using the most up-to date, wordpress, woocommerce, and storefront theme.
    All my plug-ins are also up-to date. I use, ‘theme-customisations’ plug-in, but I have no child theme.

    _________________

    The example image, was from a theme which I brought. However it had some negative points with the bottom ‘hand-held menu’ mobile buttons disappearing. Plus the ‘website logo’ did not re-size correctly on mobile size screens.
    To date the theme developer has not contacted me back about this problem. Which means I am back to square one.

    __________________

    I’m sorry for such a long post. Just trying to include all the information I can think of which might be helpful.

    Any help would be most appreciated,
    Thank you for your time
    x

    • This topic was modified 5 years, 6 months ago by alexandraqb.

    The page I need help with: [log in to see the link]

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

  • Storefront powerpack would help with Changing the location of your logo, search, and stuff.

    Thread Starter alexandraqb

    (@alexandraqb)

    Hi,

    Thank you for your reply,
    However I’m hoping I don’t have to pay any more money for a solution,

    Go to Customize, and inside the CSS put the following options:

    @media (min-width: 768px){
    /* LOGO */
    .woocommerce-active .site-header .site-branding {
    width: 73.9130434783%;
    float: left;
    margin-left: 33%;}

    .site-header .site-branding img {
    max-width: 350px!important;
    }

    /* SEARCH */
    .woocommerce-active .site-header .site-search {
    float: left!important;
    margin-left: -250px!important;}

    /* MENU NAVIGATION */
    .woocommerce-active .site-header .main-navigation {
    margin-left: 33%!important;}

    /* SITE CART */
    .woocommerce-active .site-header .site-header-cart {
    top: -130px!important;
    float: right!important;
    margin-right: -250px!important;}
    }

    This instruction only affects non-mobile browsers

    @media (min-width: 768px){
    }

    Thread Starter alexandraqb

    (@alexandraqb)

    Hello @clyon

    Thank you for your kind reply.
    This is the best option so far, however it is very spaced out. I’ve been changing the margin sizes to try and bring things more in-line. Yet it’s not 100% perfect.

    I will have to keep trying.

    Thank you =)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Storefront – How to get Logo, Menu & Search to show in the Center’ is closed to new replies.