Adjusting width of navigation menu

  • Resolved tunit13

    (@tunit13)


    7 years, 4 months ago

    Hi all,

    I am currently building this website: https://yogafestival-demerelij.nl/ and I’ve run in to a problem. I adjusted the size of the navigation menu by going to the Customizer -> The WP Options -> Main Menu -> and then change the Cell Completion (not sure if it’s that word in English) to 105. This option is just above the background colour and opacity settings.

    On my own screen (15.6″) this makes the navigation menu full width. However, on other, smaller screens this means the menu will be divided into two rows. Perhaps that is what you’re seeing right now.

    I was wondering if there is any option I haven’t found yet to make the menu full width, or if anybody has some useful HTML/CSS I can add to get what I want (+ where I should add it).

    Or is it not possible and should I try to replace the navigation menu by using a plug-in that does offer this particular option?

    Thanks in advance!

    • This topic was modified 7 years, 4 months ago by tunit13.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author CeeWP

    (@ceewp)

    Hi;

    .main-navigation li {
	width: 20%; /* 20 = 100 / item count */
	margin:0;
	padding:0;
}
.main-navigation li a {
	width: 100%;
	text-align: center;
	margin:0 !important;;
	padding:0 !important;;
}

    Please try this custom css.

    Thread Starter tunit13

    (@tunit13)

    I tried, but now it still doesn’t take the full width of the container.

    https://yogafestival-demerelij.nl/yogafestival-demerelij.nl/

    Theme Author CeeWP

    (@ceewp)

    Hi,
    Please try this. I tried and works for menu with 5 items.

    .main-navigation ul {
	width: 100%;
}
.main-navigation li {
	display: inline-block;
	width: 20%; /* 20 = 100 / item count */
	margin:0;
	padding:0;
}
.main-navigation li a {
	width: 100%;
	text-align: center;
	margin:0 auto !important;
	/*padding:0 !important;*/
}
    Thread Starter tunit13

    (@tunit13)

    Wonderful! It worked!

    Thank you!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adjusting width of navigation menu’ is closed to new replies.

Tags