Different width for header, menu, top menu and category pages

Hi there,

1. I would like to have a wider width for header area (including top menu and menu). How can this be done? I tried using the CSS provided at https://generatepress.com/forums/topic/how-to-have-different-container-width-for-primary-navigation/ but it did not work.

To clarify, this is only for the header area?

If so, try this CSS:

header#masthead .inside-header.grid-container.grid-parent,
nav#secondary-navigation .inside-navigation.grid-container.grid-parent {
    max-width: 1000px;
}

2. I would like to have a wider width for dynamic front page and category pages. This is because I want a sidebar for these pages but not for the blog posts, and the sidebar and content area will be very narrow at the category pages because of this.

Try this CSS:

body.blog div#page, 
body.archive div#page {
    max-width: 1000px;
}

Perfect, thank you! Do you also have CSS for doing it with the widget area in the footer?

Try this one:

div#footer-widgets .footer-widgets-container.grid-container.grid-parent {
    max-width: 1000px;
}