[Resolved] Blog layout customisation – Awaken theme

[David]

Cool.

[Morgan]

1. METADATA MOVE: Added filter to Code Snippets, shows , but without any dividers.
I was thinking i’d be moving the “uncategorized” below, w folder icon, to alongside date (which is still visible, and reminds me I’d need another FA icon before Tags). Is this doable?

2. NO MASONRY: Ok, will live without Masonry. Still, encourage you to look into, def looks like a GP/PHP, not CSS, issue to me.

3. MOB HEADER LOGO SWAP: I disabled the mobile header (layout/header) and then there’s no Mobile sticky?
To clarify – I like how mobile sticky is, menu, etc, just want it to change logo as per desktop.

4. MOBILE CSS MAGIC: The mobile font size dark CSS magic is working! Bam!
https://media.giphy.com/media/AXorq76Tg3Vte/giphy.gif

5. TO TOP BUTTON: I did add filter, but there’s no difference *on chrome android AND firefox focus [no cache]*. Have you checked on an actual phone?

Working on rest . . .

[David]

1. This CSS:

.cat-links, .tags-links {
    font-size: 0 !important;
}
.cat-links:before, .tags-links:before {
    display: inline !important;
    font-size: 15px;
}

.cat-links a, .tags-links a  {
    font-size: 15px;
    margin-right: 0.25em;
}
.cat-links a:not(:first-of-type):before, .tags-links a:not(:first-of-type):before {
    content: '|';
    margin-right: 0.25em;
}

They won’t all fit on a single line on the Blog as there is not enough room in the reduced width entry header.

2. The Masonry only bugs out when there is something interfering with the size of the element, as it uses JS to calculate that size. So any CSS that may change the elements box-sizing could effect it. We haven’t experience any errors where the blog is left as per the standard layout unless something other script has interfered with it.

3. You have the option to enable Sticky nav to both Mobile and Desktop – the option being: ON.

5. Tested only on iPhone and not seeing a difference between browsers.

[Morgan]

1. FANTASTIC. Works! Breaking lines is fine. Tweaked padding and looks great!

2. Ok. Seemed to have worked without CSS change, then broke without a change. But I can’t be certain.

3. This seems to have got confused.
– Sticky desktop, was enabled, worked.
– Sticky mobile, was enabled, worked. By design(?) sticky mobile *does not* swap the logo on-scroll, like on desktop. I was asking if it could.

5. Ok, definitely the same on every browser on my Android, positively not cache issues – the same on browsers that I’ve never even used! EDIT: On partners android chrome it’s the same. Feels like a memory issue, but haven’t encountered before. Not a dealbreaker, happy to move on if there’s no answers.
(Deleted prior, host had screwed up my site, then restored).

[Morgan]

6. EDIT (server issue). Playing with this now

.mobile-menu-open .mobile-header-sticky #mobile-header.toggled .main-nav>ul {
    height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[David]

3. So first off for this to work you would have to disable the Mobile Header. Then assign the Sticky nav to Both mobile and desktop and add the logo there. Then it works.

5. The way it works is you set the time it takes to scroll to top. So it scrolls faster the further you’re down the screen – as its travelling more distance. I can ask one of the other guys to take a look. Let me know.

6. I edited the code earlier – forgot to say – i removed the .mobile-header-sticky selector so it applies to mobile header when its sticky or not but obviously this is no longer suitable considering point 3.

[David]

Looking closer at point 6 – this introduces too many issues especially if the navigation requires scrolling. So is not something i can pursue. The slide-out overlay is the best way to do this.

[Morgan]

6. EDIT: Just saw your update above. I’m not clear – I thought we were working on an overlay?

This *was working fine*, centered the text, added padding, all I need.
But after I changed icon: https://generatepress.com/forums/topic/changing-slideout-navigation/ it’s not working.
– EDIT: fixed FA not loading: https://docs.generatepress.com/article/font-awesome/
– Don’t know how to add padding *around* ul elements, can you pls add below? (padding-bottom added for look in chrome)

.mobile-menu-open .mobile-header-sticky #mobile-header.toggled .main-nav>ul {
    height: 62vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	  padding-bottom: 40px
}

[David]

The code was to force the normal mobile menu ( not off canvas panel) to cover the screen. It creates some issues, for one it won’t stop the page from being scrollable, main issue is that if the menu becomes longer then the screen can permit it won’t be scrollable. If you want to pursue it then you would need to use this CSS instead ( as you’re no longer using the mobile header ):

.mobile-menu-open .main-navigation.toggled .main-nav>ul {
    min-height: calc(100vh - 50px); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
    box-sizing: border-box;
}

I am very reluctant to provide a solution that may cause problems and this is one of those area that can be problematic.

[Morgan]

Oh ok, gotcha.

Above CSS is working. I don’t see why scrolling or not is a problem?
I just wanted to centre/change text size, add padding, I thought full-screen overlay would be easier (may not be the first time I’ve been wrong).
With yr prior css I played with covering about 85% of screen, which also worked.
Would that resolve these problems? And can click off menu to hide too?

[Morgan]

3. Ok, got it (at last). Logo swap is working.
Layout/Sticky Navigation/Menu Item Height, has no mobile option. And MOB-header+sticky padding is now a bit off, can you pls advise what I need to just tweak the padding, and enlarge swapped logo, for both header+sticky on MOB?

[David]

The issue with this method is if you add more menu items or sub menu items the list could extend longer then the screen and cause scrolling issues. Not sure haven’t played around enough but is a potential problem. But it looks like its working quite well with your current short list menu. I sometimes surprise myself….

The logo size will respect the Mobile Menu Item Height set in the Primary Navigation for both static and sticky.

The padding – what exactly is required? More/less padding to to sides of the logo and hamburger menu?

[Morgan]

Mobile Menu Item Height set in the Primary Navigation for both static and sticky.

Yes, for DESKTOP, but what css do I need to adjust MOB-sticky (yes) padding around MOB Logo & HAMBURGER.

For menu code below, how do I adjust padding above/below links (UL?) + adjust font-size? (typical ways didn’t work)

.mobile-menu-open .main-navigation.toggled .main-nav>ul {
    min-height: calc(100vh - 50px); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
    box-sizing: border-box;
}

[Tom]

Maybe something like this will help?:

@media (max-width: 700px) {
    .inside-navigation {
        padding: 10px;
    }

    .main-navigation.toggled .main-nav ul li a {
        font-size: 17px;
    }
}

As for the padding above/below links, it looks like your menu is centered vertically, so it’s not possible to adjust the spacing above/below. If we un-center it (move it to the top), we’d have more control over that.

[Morgan]

The below is what I’m working with now Win Chrome, haven’t tested cross-platform yet.
I *did* want to make top MOB padding less, and .inside-navigation {padding: -4px 0 0 0 ;}} doesn’t work, nor does -margin (weird top margin I’m trying to reduce).
The only thing in devtools that worked was: body > [itemtype="https\:\/\/schema\.org\/SiteNavigationElement"]:nth-child(2) {margin: -3px 0 0 0 } .
And that’s obvs not for MOB sticky. What do I need here?

I cannot remember what below /* _MOB heading fix*/ was for! Is this, or other parts, now redundant?

/* MOB header */
@media (max-width: 700px) {
    .inside-navigation {
        padding: 0px; }}
/* _Overlay */
.mobile-menu-open .main-navigation.toggled .main-nav>ul {
    min-height: calc(100vh - 50px); 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 50px;
    box-sizing: border-box; }
/* _Fonts, padding */
.main-navigation.toggled .main-nav ul li a {
     font-size: 1.5em;
     letter-spacing: 0.2em;
     padding: 11px;}
/* _MOB heading fix*/
#mobile-header {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
}

[Author]

Posts