Add and increase space between menu items.

Hi.

How to increase the area of the header menu ? If i want to add more items in the menu , as you can see in the photo ,the items will go down and not forward . I want all of them to be in the straight line.

Thank you

Hello @RobertCar ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

Hi @RobertCar

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

https://simplydeco.de/

As you can see if i try to stretch the menu items , the last of them will go under the first one .

I want also to be able to have the background color (bar) also streched to the entire page. Like in this image below.

This is how i create space between them and also how i add color to them .

One thing that i cannot find . I managed to change color to the each item(box) ,but i want to make the entire bar one color , like in that picture.

In base.css i add those line

.header__menu-item {
  padding: 3.2rem;
  text-decoration: none;
  color : black;
  font-family : "Arial";
  background: #c8edec;
  size : 12px;
}

Thank you !

Hi @RobertCar

We would like to suggest you a solution below:

Please add the following code at the end of the file base.css:

header.header{
    padding: 20px 0 0 0;
    max-width: 100%;
}

nav.header__inline-menu {
    width: 100%;
    background-color: #c8edec;
}

ul.list-menu.list-menu--inline {
    width: 100%;
}

/* Adjust the right margin of header icon */
.header__icons {
    margin-right: 30px;
}

/* Adjust the lefy margin of header icon */
details-modal.header__search {
    margin-left: 20px;
}

Here is the result:

I hope that this can be helpful for you.