Push hero slider under header7/26/2023 ![]() ![]() Switch into notebook view mode and you’ll see the site title is still left aligned, because the settings we just added were inherited from desktop mode. You should also click the middle align button to ensure the site title is vertically centered as well: Vertically align the site title Step 1.9b: Notebook & Smaller Site Title Alignment In this case our site title is aligned to the left edge, so adding a positive value in this field will push it to the right.Īdd 30px in the field and hit your ENTER key, then you’ll see a nice balanced amount of space appear on the left side of the site title: Offset the site title 30px from the left This field controls how far a layer is offset from whichever horizontal edge it is aligned to. We want it to be offset a little bit to ensure it doesn’t look cramped, so in the same settings area locate the field labeled “ X“. Start in desktop mode, select the site title, and in the “Size & Pos” settings we’ve used a few times so far, click the left align button: Left align the site titleīy default this will push the layer flush against the left side of the header group. The tablet and mobile views will then automatically inherit that center alignment setting. To make this happen we will first left align the title in the desktop view mode, and then center align the title in the notebook view mode. In the desktop mode we’re going to want the title to be left aligned, but in the notebook, tablet and mobile modes we’ll want to center align it instead. The styling for the site title is done, so now we need to take care of its alignment. With these settings in place your header group should now look like this: Sized and aligned header group Enter the value 65px and hit your ENTER key to apply. Once more in the same settings area find the field labeled “ H“. To complete the sizing and aligning we need to give our group a fixed height. To do this, still in the same settings section in the sidebar, locate the “Size Presets” field and select “Full Width” from its dropdown menu: Use the “Full Width” size preset to stretch the menu to the width of the site Now we want to make the menu stretch the full width of our site’s content area. In here you can align the header with the top of the site by clicking the top align button: With the “Header” layer selected, click the top align button to move it to the top of the site With the “Header” layer selected, go to the “Layer Options” tab in the right sidebar, and then into the sub-section “Size & Pos”. ![]()
0 Comments
Leave a Reply. |