Hi, I am trying to figure out how to make a horizontal line under the main menu, also being able to adjust its width and color.
The second part of the question is how can I change the font in my main menu? Are fonts included with this theme? The site: meinnorway.com
Hi Sergey
Add the following to your Custom CSS plugin:
/* Header */
.site-header:before {
border-bottom: 1px solid red;
}The value red can be changed to a hexadecimal color like #000000 for black.
Fonts are included in the Premium version, you can check that offer out at Appearance > Ultra Premium. Happy to help out with Custom CSS where required though. For the menu:
/* Menu */
.main-navigation,
.main-navigation .menu-search .searchform input[name=s] {
font-family: "Lato", sans-serif;
}If you want to use a Google font just insert the @import statement right at the top of your Custom CSS.
Thank you for advice about fonts. It worked.
As for the line under the main menu, it appeared only under the logo. I would like to have a line separating my menu (whole white area of the header) from the slider, going from left end to the right end of the page. So i changed “before” for “after” in your command above.
There’s still one problem. After I changed font and added header line, the page looks different in Chrome and Edge. Font looks more bold in Edge. Also there’s a greyish border between the line and the header in Edge which is absent in Chrome. Is there a way to remove that greyish boarder(spacing) in Edge? Also how to make font looking the same?
I can’t test in Edge so you’ll need to help me out there.
Here is what is already being added to :after:
.site-header:after {
bottom: -6px;
box-shadow: rgba(0, 0, 0, 0.25) 0 6px 6px -6px inset;
content: "";
height: 6px;
position: absolute;
width: 100%;
}That’s the standard header shadow. If you want to try remove it, add to your Custom CSS:
.site-header:after {
bottom: 0;
box-shadow: none;
height: auto;
}Try that.
Perfect thanx a lot!
And the last question at least for today 🙂 if I want to have my slider just on the home page so that when the reader opens any post she won’t see the slider? And if she clicks ‘home’ then the home page will show the slider and all blog posts underneath. How to do it? Thank you for help!
Glad to hear you’re making progress.
You can manage your home slider from Appearance > Theme Settings > Home. You can also manage it from Pages > Home using the Page Slider metabox in the right column. The easiest way of combining a page slider and your posts is to use Page Builder. You can go to Appearance > Home Page OR Pages > Home > Page Builder. Insert a Post Loop widget and select Blog as the template within the Post Loop settings. Let me know how that goes.