We’re updating our Theme (currently using Modern, but I think most default/stock Themes have the same behavior) and came across a few questions:
-
What is a good way to extend the Main Header Menu sides to the full width of just the 16 grid span structure (see image)? If you change the header background color it looks a little strange to have that new color come out past the menu on the left and right sides (the space is more of the issue, not the color, unless all areas are the same matching color). Maybe the page/menu padding/margins or something can be adjusted easily? It’s sometimes hard to know what will fix one area and possibly have unexpected side effects in another area if the coding is uniquely shared (an OFF TOPIC example of this unique share: If you adjust the Theme “Links” color (Theme editor → CUSTOMIZE → Colors → Links), the header block area color (the area that displays the “Order #1000 has been processed” information) for the html emails that go out for orders somehow share this same color option and will be the same color (at least it does in our cart - version 4.18.1, unless we accidentally modified it long ago - might be this code in the Customer notifications snippets (Settings->Notifications->Code Snippets->Header): .message-header__title {
background-color: {% if styles.links %}{{styles.links}}{% else %}#999{% endif %}
}). Anyway, this off topic example is not something I need to worry about right now
)
-
Is it best to place the code below in the Custom CSS area to force the main website Footer to only be the full width of the 16 grid structure instead of blowing out to the full size of the screen?
.tygh-footer > div {
max-width: 1240px;
}
Thanks!