Header: Logo and Main Menu on two DIFFERENT rows for more Menu items

Store Design
, ,
1

Hi everyone!

I am trying to find a way for editing my header.
I would like to have TWO SEPARATE ROWS: 1st for the logo, 2nd for the actual main menu.

In that way I could have a longer and more clear menu in my homepage.

This is my address: https://cphagen.com/

ALL help is welcome.

Thanks

2

hi @CPHAGEN_Nordic
to make the layout like that, You can try follow this path:
Themes => edit code => asset => theme.min.css
and add this code to bottom of the file theme.min.css

@media only screen and (min-width: 990px) {
    .header__main .header-table {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: auto!Important;
    }
    .header-table__center {
        grid-row: 1;
    }
    .nav__container{
        grid-row: 2;
        grid-column: 1 / span 2;
    }
}
1 Like
3

hi @ExpertRookie

That helped BUT I need logo and menu elements to be centered and it was not the case with your code :slightly_smiling_face: Could you assist me further please?

I would like:

1st row: CPHAGEN LOGO centered.

2nd row: Main Menu, centered.

Log in, Search, Basket on the right.

Is that possible? :slightly_smiling_face:

Thank you very much!

4

Hi @CPHAGEN_Nordic
you can try to use this code

@media only screen and (min-width: 990px) {
  .header__main .header-table {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-rows: 1fr 1fr;
    height: auto!Important;
  }
  .header-table__center {
    grid-row: 1;
    grid-column: 1 / span 2;
  }
  .nav__container{
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: center;

  }
  .header__meta {
    grid-row: 2;
    grid-column: 2;
  }
}
1 Like
5

Dear @ExpertRookie , you are the best!

This looks great on desktop. :slightly_smiling_face:
I decided to put “Log in, Search, Basket” in the same row of logo (1st one) to avoid overlap in landscape mode.

Still one thing that I really don’t like: the dropdown menus cover the entire page.
Any way we can display only the “rows” that the sub menus actually use instead of having an all minty green page?

Thank you, thank you :slightly_smiling_face: