Placing navigation in columns

Support
#1

Would like to place the navigation at the top of the page in four columns corresponding the body and footer content.
See screendump for details.

#2

Hi @Droogers,

Thanks for writing in.

Add this in your custom CSS:

.masthead-inline .desktop .x-nav {
    display: block;
    width: 57%;
    margin: 0 auto;
    float: none;
}

.x-navbar .desktop .x-nav>li{
    width: 140px;
}

Adjust the number to achieve the best position of your navbar.

Hope it helps.

Let us know how it goes.

Thanks.

#3

Thats a big step in the right direction but when I reduce the window size on desktop the columns in the navigation dont follow the columns in the footer.
On Ipad it rersults in two rows navigation…
Solution for that?

#4

Hi there,

What you are trying to achieve requires a bit more customization since this feature is not available out of the box.

The code previously provided should be able to get you started but further customization unfortunately goes beyond the scope of our support.

What you can do is write some media queries that will target the iPad view so that you can set the dimensions, size, and placement of the main menu.

Hope this helps.

#5

Hi
Thnaks for the reply. I understand its out of your scope.

#6

You’re welcome! :slight_smile: