Category Archives: CSS

Move the submenu higher in the Kleo Theme

CSS Themes No Comments

In the WordPress Kleo theme, the submenu can appear to too far from the main menu links if the header is big.

Typically the submenu is at a good height when a page using the Kleo Theme is in a scrolled state because the header reduces in size. But it can look too far away if the header is unscrolled and big.

To fix this, place the following code in your theme’s style sheet. Hopefully you are using a child theme. If not, your style sheet code could be overwritten with theme updates.

.navbar-nav>li>.dropdown-menu {
margin-top: -36px
}

.header-scrolled .navbar-nav>li>.dropdown-menu {
margin-top: 0 !important;
}

You can tweak the pixel values to suit.

If you write CSS, test your code with Firefox

CSS No Comments

I use both Chrome and MS Edge (Chrome) as my two main browsers. I use Google’s browser for G Suite (Gmail, Docs), Adsense, and YouTube as I have YouTube Premium. Nearly all other sites I visit I use Edge. I find this divides my web based work and entertainment nicely. However, I sometimes use Firefox when I want to test something that is cached because I have configured it to not cache anything. But it turns out that Firefox is also very handy for another reason.

If you are like me, you write a lot of CSS in WordPress and testing that often means you need to use your browser inspector. If you do this in Firefox you have an extra feature that other browsers do not have. It will actually tell you why your CSS isn’t working. With other browsers, you can only guess why your code is not working or in conflict. This video will show you how to get these useful tips when using Inspector.