Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 18, 2021 at 3:39 pm #1306377
    fabian_stricker

    Dear Kriesi support team,

    This is my first request/post, so hello and hope you can help.

    I want to create spacing between my header items, and I figured to do this by adding the following to my ‘Additional CSS’:

    #avia-menu li {
	margin : 0 2.5%;
}

    While this is indeed separating my list items, it is wrapping the overflow content. How can I prevent this and have all items display on the same line?

    June 19, 2021 at 9:24 pm #1306531
    Mike

    Hey fabian_stricker,
    Thank you for your patience and for the link to your site, in order to use a margin with a percentage for the main menu li, you will need to also increase the .main_menu & .av-main-nav-wrap containers like this:
    (*desktop example)

    #avia-menu li {
	margin : 0 2.5%;
}
.main_menu {
    width: 80%;	
}
.av-main-nav-wrap {
	width: 95%;
}

    the problem with this approach is the wider the containers are the more margin is added because of the percentage.
    I recommend simply using a fixed px or em width instead like this:

    #avia-menu li {
	margin : 0 18px;
}
    #avia-menu li {
	margin : 0 .9em;
}

    this will increase the parent .main_menu & .av-main-nav-wrap containers to fit.

    Best regards,
    Mike

    June 22, 2021 at 9:12 pm #1307020
    fabian_stricker

    Dear Mike,

    Many thanks for your instructions, and help!

    BR,
    Fabian

    June 22, 2021 at 10:15 pm #1307027
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Margin for header menu list items without wraping’ is closed to new replies.