How to centered logo and menu?

  • Hi everyone,
    I need some help with reorganizing header.
    I would like to logos and menu were centered and the cart was in the upper right corner, just like here.

    I know that WooThemes has designed Storefront Designer extension that gives the ability to change the header, but I don’t want to buy the whole extension if I would use only one of its functions.

    I managed to raise the cart and center the menu with CSS, but I don’t know how to center logo. Besides, I am afraid that these “operations” on CSS are not good enough and I should change something in the file header.php (in my child theme of course), but unfortunately I do not know what and where, because I don’t know PHP.

    I read about the actions and hooks in Woocommerce but but I didn’t get it.
    I would be grateful if someone could lead me by the hand and show where, how and what to change in the code to achieve the effect I want to.

    Regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • James Koster

    (@jameskoster)

    Hey,

    You can definitely do this with CSS.

    Off the top of my head, something like this should help;

    .site-branding,
.site-logo-link,
.site-logo-anchor,
.main-navigation {
display: block;
width: 100%;
float: none;
margin: 0;
text-align: center;
}

    That should get everything aligned centrally and stacked on top of each other.

    Then just absolutely position the cart in the top right corner.

    Thread Starter Kinga Agnieszka

    (@lilith_82)

    Hey,
    Thanks for your response, but this suggestion didn’t work.
    Actually text in menu was centered in its area but logo didn’t move.

    It may due to the arrangement of elements.
    I drew a grid of elements and it looks like this.

    So I think I should get rid of “secondary-navigation” box. Then there will be space to center logo. Next I should move “site-header-cart menu” properly and therefore I’ll get area for menu. Am I right?
    Could You help me with this?

    And another trick is when I’m changing “site-navigation” width it also gets higher (all col-full div become higher) and makes space between header and content.

    I will be grateful for further help.
    Regards

    Thread Starter Kinga Agnieszka

    (@lilith_82)

    Hey,

    this parts: “site-header-cart menu” and “when I’m changing “site-navigation” width it also gets higher” are solved with CSS like this:

    .site-header-cart.menu, .cart-contents {
	top: -170px;
}
    .primary-navigation {
width:977px;
height:30px;
text-align:right;
}

    Any suggestions how to center logo?

    Regards

    doakh

    (@doakh)

    I think you need to change the General Layout of the header @ around line 785 of style.css, specifically ‘site-branding.’ It appears you are only using ‘site-branding’ & ‘site-header-cart’ in the header. It would be best to keep it at a percentage as it is already.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to centered logo and menu?’ is closed to new replies.