gridd
gridd copied to clipboard
Site title and tagline and menu placement
Hey Ari
Here is the new default 3.0 placement of header elements:

Most sites have the layout like this:

It would be best to show the default placement that most sites use. It would be great to have the centered code available. So a user can adjust it.
Btw this is a new local site using the Gridd 3 from about a week or so ago. With almost no content.
On one hand you're right. However, if you have a few menu items then the new defaults look like this:

whereas the old defaults look like this:

Trying to find the right balance here, if you have any ideas on how to accommodate these cases I'm all ears :)
Default looks like this (really nice btw).

The test to move the site title + tagline to the left. With menu to the right.
Adjusting placement through the customizer -> Header Grid.

This does not look good.

Changed auto to 250px (Branding column size) Changed auto to 100% (Nav column size)
Clicked the pencil by the menu and it went to Site Identity. ---NB! Should this go to Site Identity?
Adjusted the Site Title Font-Size and the Tagline font size. Adjusted the Spacing between elements. ---- NB. Should the b and e be in capital letters like so: Spacing Between Elements Adjusted the Horizontal Alignment to Left.
Result:

I am now going to hunt for lessening the space between the site title and the menu. As the menu could go a little further to the left and come closer to the site title. I am not seeing any setting for customizing the menu. Colors and placement as in padding/margin/font size etc.
Clicked the pencil by the menu and it went to Site Identity. ---NB! Should this go to Site Identity?
It does. But there are a bunch of pencil icons there: alignment, site-name, site-description, nav and more.
Should the b and e be in capital letters like so: Spacing Between Elements
Fixed.
I am now going to hunt for lessening the space between the site title and the menu.
Fixed the options a bit for this one, allowing negative values 'cause CSS can sometimes be quirky.
I am not seeing any setting for customizing the menu. Colors and placement as in padding/margin/font size etc.
Most of these options are not used in most cases so they were removed (though as far as I recall they existed in Plus, so if that is the case they're still there) By enabling the inherit/override switch you can override the background-color which also tweaks the text-colors and link-colors for a11y. The "justify items" control in most cases performs a similar role to padding/margin etc, determining how items are distributed to fill the whitespace.
Can you share some CSS menu example code for links, underline, visited, current etc? I can add a wiki doc with styling the menu. Nice for me and for whomever else comes across it. I can then close this issue.