[Resolved] Blog layout customisation – Awaken theme

[Tom]

In this selector: .mobile-menu-open .main-navigation.toggled .main-nav>ul

You have: padding-top: 40px;

What if you remove that? It should bring it up further.

It doesn’t look like you’re using the mobile header, so you shouldn’t need that CSS.

[Morgan]

Thought I’d add this for anyone searching for changing the overlay icon.
The code Tom provided for .slideout-toggle icon customisation was breaking for some reason, but the code a user offered using inline-block instead of block, did the trick, see below:

.slideout-toggle {display: none !important;}
.main-navigation .slideout-toggle a:before {content:none;}
.custom.slideout-toggle {display: inline-block !important}

In this selector: .mobile-menu-open .main-navigation.toggled .main-nav>ul – padding-top: 40px;

This is for the overlay and it’s working fine.

It doesn’t look like you’re using the mobile header, so you shouldn’t need that CSS.

Right, yes, previously used then disabled. Removed CSS.

I’m using the following to tweak the mobile and desktop headers, hacky but working across sizes:

.navigation-branding img,.site-logo.mobile-header-logo img {
  padding: 6px 0 7px 0;
}
#site-navigation .navigation-branding, #sticky-navigation .navigation-branding { 
  margin-left: 8px
}

[Tom]

Awesome! Looks great 🙂

[Morgan]

Thanks Tom!
And thanks to you & David for all your help.
Signing this one off!

[Tom]

Glad we could help 🙂

[Author]

Posts