Let’s style the title and menu. We’ll use the accent color we added for the title and menu. And we’ll also use the
float CSS property to move the title and menu.
If you’re not in the Code Editor, from the Theme tab, click Edit HTML/CSS.
- Under the Styles area, click
main.lessto open it.
- Scroll down to the Header area to find the
.wsite-logoclass. You’ll notice that there is styling for the link color (logos by default are a link to the home page), an image height (for when a user uploads a logo graphic to use instead of the title text), and styling for the title text. The link style uses the accent color we created:
- Let’s float the entire logo area to the left. Let’s also make the title bigger.
.wsite-logoclass, add a
floatproperty and set it to
left. For the
#wsite-titleelement, change the
- Now let’s float the menu to the right. Scroll down to the Navigation area until you find the
.wsite-menu-defaultclass. Like the
.wsite-logoclass, this menu class includes styles for multiple aspects of the menu, including active and hover link styles, font styles and padding. Since the link color uses the
@text_colorvariable, it will use the primary color set by the user (remember we set the
@text_colorvariable to use the
@site-primary-colorvariable in Step 5). And the link hover style will use the accent color.
- Let’s float the menu to the right by adding the
floatproperty, and change the text so that it’s all uppercase by adding the
- Click Save.
The layout of the header has changed. If the title doesn’t seem to be lining up correctly, it’s because the editor window is too small.
Ok! We’re done changing the styling of the header template. Pages using the
Header template reflect the changes we made. Now let’s change how blog pages look.
What Just Happened?
You edited the
main.less stylesheet and used CSS properties to change the display of the title and the menu.