Set Width of Nav Search to be that of Primary Nav

Hi there,

You can try adding some CSS like this:

.navigation-search.nav-search-active {
    width: 400px;
    left: auto;
    right: 0;
}

Let me know :)

Hello Tom,

That CSS worked well, but I have one question.

Is there any way to make the search form the same width as the menu automatically?

At present if my menu exceeds 400px then I would need to manually edit the CSS and increase the search form width.

I am unsure if this is possible given the structure of the HTML, but if anyone can do it then its going to be you guys at GeneratePress!

Thanks!
Mike

It's the same width as the menu by default. In your case, the width of the menu is 100% of the container.

If you wanted the navigation to only be as wide as the items within it, you would have to use a regular site logo (not navigation logo), and set the navigation location to "Float Right".

Let me know if this helps or not :)

Hello,

That was the initial way I was doing it, however I then lost the ability to have my sub menu the full page width.

After chatting with Leo we decided the best way was to follow the steps in your article,

https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

It seems to have worked a treat so far, although has required a lot more CSS.

https://generatepress.com/forums/topic/horizontal-sub-menu/#post-598394

Is there any way I could keep the float right method without navigation logo but still have my sub menu 100% page width?

Thanks,
Mike

Ah, unfortunately not - the sub-menu can only go as wide as the parent navigation element. In this case you'll likely need to set a fixed width for your navigation search.

Hello,

OK, that is as I suspected. I will continue setting a fixed width on the menu search.

Thanks Tom,
Mike

You're welcome :)