Expand Main Menu Width

Hi @tgtis,
Please try this for menu problem: https://docs.zakratheme.com/en/article/how-to-keep-all-the-menu-items-in-one-line-1a99x8d/

Furthermore, you can change the width of the dropdown to fix the problem in the premium version of the Zakra: https://docs.zakratheme.com/en/article/primary-menu-dropdown-overview-pro-incyfp/

Thanks.

Hi Ashish,

I tried what you suggested. When I enabled Keep menu items on one line, I lost most of the main menu. I disabled that option and the menu came back.

What I want to do is extend the width of the area allocated to the menu so the last two menu options stay on the first line.

Here is a link to before, after and wrapping I mentioned:
https://hinsdalecentralfoundation.org/wp-content/SP/

I also don’t have the premium version. Is there a way to resolve this issue in the free version?

Thank You,

Tony

Hi Ashish,

I replied that the fix you suggested didn’t work. I also provided a few screen prints of the situation. Can you provide any additional suggestions?

Thank You in Advance.

@tgtis,
If you want to manage the menu in one line in the free version, the best way is:
1. Select the second option for Header Style: https://docs.zakratheme.com/en/article/header-main-area-overview-1yydm54/

2. Enable menu in one line as I mentioned before. doing so will not remove the menu items, it just moves to the dropdown that appears while hovering the 3 dots icon.

Otherwise, you can add the following custom CSS:

.tg-primary-menu > div > ul > li {
    margin: 0.2em;
}

Similarly, for dropdown width, add this:

.tg-primary-menu > div ul li ul {
    width: 280px;
}

Thanks.

Hi Ashish,

I appreciate your suggestions. The additional CSS resolved the issue. I hope you are doing well.

@tgtis,
Great to hear that and I’m doing well. ??

If you like the Zakra theme, you can help us by leaving a review here: https://www.ads-software.com/support/theme/zakra/reviews/

Stay Safe! Cheers!