[Resolved] How can i create header with logo left, menu center and cart right?

Home Forums Support How can i create header with logo left, menu center and cart right?

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1033783
    Uroš

    Hello, i just cant seem to find any solution for my header to position my menu in center. Im looking for something similar like Casper did with their header: https://casper.com/home/

    I would also like to recreate their mobile menu but it seems like it’s impossible with generate press. I hope i’m mistaken and someone will help me out. 🙂

    I also use elementor pro

    #1034124
    David
    Staff
    Customer Support

    Hi there,

    can you remove the coming soon on your site so i can see your current setup ?

    #1034199
    Uroš

    Okay i did it 🙂

    #1034337
    David
    Staff
    Customer Support

    With your current set-up – first you will need to setup woocommerce so as the cart icon displays. Then add this CSS:

    @media (min-width: 769px) {
        .inside-header, .main-navigation ul {
            display: flex;
        }
        .main-navigation  {
            flex: 1;
        }
        .main-navigation ul li:first-child, .main-navigation ul li.wc-menu-item {
            margin-left: auto;
        }
    }
    #1034839
    Uroš

    I did what you said but i got cart text instead of icon. And the css is not changing anything :/

    #1034968
    David
    Staff
    Customer Support

    You can enable the Cart Icon in Customizer > Layout > Woocommerce.

    #1035179
    Uroš

    I do have enabled cart.. but it’s not showing up in menu it’s probbably bugged out or something

    #1035194
    David
    Staff
    Customer Support

    Do you have the Woocommerce shop and products set up? Currently i cannot access the shop to add any products to see what the issue may be.

    #1035282
    Uroš

    Wow it really does not even show shop.. hmm probably there is a problem with my woocommerce installation

    #1035369
    Uroš

    Okay i fixed everything but it still does not center it on header width because it center it between logo and cart.. I want that menu is perefectly centered inside header

    #1035594
    David
    Staff
    Customer Support

    Can you go to customizer > layout > header and enable Navigation as Header and remove the CSS i provided above. May be an easier solution.

    #1035604
    Uroš

    That does not center primary navigation haha

    #1035671
    David
    Staff
    Customer Support

    No – but if you can enable it then i can look at what CSS is required.

    #1035875
    Uroš

    Oh okay. I enabled it so you could try it now 😛

    Btw can i ask you where i could learn something about css so i could update my website by my self in future..?

    #1036060
    David
    Staff
    Customer Support

    Try this CSS:

    @media (min-width: 769px) {
        .navigation-branding,
        .main-navigation ul li.wc-menu-item,
        .main-navigation ul li.search-item {
            position: absolute;
        }
        .navigation-branding {
            left: 0;
        }
        .main-navigation ul li.wc-menu-item {
            right: 60px;
        }
        .main-navigation ul li.search-item {
            right: 0;
        }
        .main-navigation .inside-navigation {
            justify-content: center;
        }
    }

    Learning CSS is as much about learning browser dev tools and HTML.
    Good place to start with Dev tools for CSS:

    https://developers.google.com/web/tools/chrome-devtools/css

    Then checkout W3 Schools they cover and provide examples of all CSS properties.

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