[Resolved] Awaken theme – Menu issues/Q's

[Morgan]

Leo asked that I break up prior ticket

MENU ISSUES/Q’s:

DESKTOP:
4. The search field appears over the logo, with no bg/border/etc styling showing.

5. How can I move the search icon left of secondary-nav hamburger?

6. The site-logo width is constrained, I’ve checked browser CSS (seems fine), added CSS from forum, but still it wont go wider than about 56px, stretches vertically.

MOBILE:
7. How to have mob hamburger show only primary-nav-menu, i.e. mob hides desktop-secondary-nav-hamburger

8. Customizer/Layout/Header mobile-breakpoint can’t be set lower 768, and hence the shrink-sticky effect doesn’t work on TABLET.

[Tom]

Hi there,

4. This is happening because your navigation doesn’t have a background color. The nav search takes colors from the nav, so this can happen if the nav is transparent. You can use CSS to color it however you like:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    color: #000;
    background: rgba(255,255,255,0.9);
}

5. Try this CSS:

.nav-aligned-right .main-navigation .menu > li.slideout-toggle {
    float: right;
}

6. The height of the nav logo is set to fit inside the navigation. You can undo this so it stays at it’s regular height like this:

.main-navigation:not(.navigation-stick) .navigation-branding img {
    height: auto;
}

7. Not sure I understand. Where’s the current secondary nav?

8. Yes, this is intentional as of right now. You should be able to go lower if you install GP 2.3, which is currently a release candidate: https://generatepress.com/generatepress-2-3/

[Morgan]

Thanks Tom, just getting back to it, first things first.

6. .navigation-branding img { height: auto; }
Works for static, but breaks the changed sticky logo – goes huge on-scroll.

[Tom]

I just adjusted the CSS above – can you give it another shot?

[Morgan]

I’ve just found that the ‘additional CSS’ panel in Customizer is full of custom CSS from ‘Richard Bland’ (I use “code snippets” for custom css).
This has been causing half the issues, yet NOONE from GP has mentioned this. This is default in the imported Awaken template.

 CUSTOMISATION BY BHAMBRABLAND	
	Created: 06/09/2016	
	Written by Richard Bland

Does this need to be deprecated/updated, seems it’s conflicting with latest Customizer settings?

Will update what’s fixed now below.

[Tom]

Every site from our Library comes with custom CSS. The Awaken site was built by Richard, which is why that CSS is in there.

You can try removing bit by bit, but all of it should have its purpose. If there’s a specific part of it which is causing a conflict, we can help adjust it/decide if it can be removed in your specific case.

[Morgan]

I’m clear about most issues now that I’ve removed that code.
It’s not an issue that it was there, it is an issue that it was conflicting with the code you guys were providing, and wasn’t mentioned. Yes it *had* its purpose, now it looks deprecated, have you looked at it recently?

4. Nice! Tweaked & working!
Happy to leave if the following question is too hard, but worth a shot: is it possible for the below padding-left to be defined by the size of of the logo, i.e. at mobile logo is 100px, so add this + 12px?
/* current search form */ .navigation-search input[type="search"]:focus { padding-left: 18%; }

5. Yes! Bam!

6. All these issues are not fixed by removing Additional CSS, Customizer/CSS is behaving as it should.

7. Sry, should have ‘off-canvas’ that’s what’s showing on Tablet + Mob, not Primary menu.

8. Cool, can see it in 2.3.

[Tom]

4. Can’t you just use the width of the logo?

.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    padding-left: 200px;
}

#mobile-header .navigation-search input[type="search"]:active, 
#mobile-header .navigation-search input[type="search"]:focus {
    padding-left: 150px;
}

7. So do you want your off canvas menu to show the same menu as your primary menu? If so, you can set your primary menu to the “Off Canvas Panel” menu location in “Appearance > Menus”.

[Morgan]

4. I was thinking there MIGHT (I’ve been away from frontend webdev for many years) be an easy way to dynamically make wider than element, but prolly needs JS.

7. I want a mobile menu to show primary nav.
I prolly won’t keep menu icon for off-canvas, and have menu on mobile for nav. As u do.

[Tom]

4. Yea, this would need JS to see the actual width of the element. You’d also need a listener to see if it changes on window resize. It’s likely better to use media queries.

7. As we do where exactly? I’m not 100% with you here yet. By default, the mobile menu is the primary nav. If you change the mobile menu to the off canvas panel, you can choose to make it display the primary nav or a separate nav.

[Morgan]

4. Media queries it is! Do I need more CSS for that, or the above will do it?

7. I think we’re confusing each other (“as you do”, figure of speech).

EDIT: Deleted much confusion/false-starts, rewritten:

My primary-menu – “Menu” is set as ‘primary menu’ in Customizer/Menus. This menu is not appearing on mobile. I don’t know what to do so it does.

I’ve now tested with off-canvas OFF in Customizer, and the Primary-Nav *does work* as expected on mobile.

I see forum ref’s re off-canvas Menu “set it to Mobile only” and Docs say “You can choose to activate your off canvas panel on mobile, desktop, both or disable it completely”, but don’t know how to do this.

To clarify – I want menus:
– DESKTOP: Primary-nav + Off-Canvas (client login, etc).
– MOBILE: Primary-nav (with both menu content in it, as per this post [except I have off-canvas, not secondary menu]: https://generatepress.com/forums/topic/how-to-merge-two-menus-into-mobile-offcanvas/ . I’m thinking this is simpler as a new Menu specific to Mobile).

Let me know! 🙂

[Morgan]

– – – see above – – –

[Tom]

So on desktop right now, you have a primary menu: http://prntscr.com/o522tz

There’s no off canvas menu, but it should display if you set it to “Desktop only” in Customize > Layout > Off Canvas Panel.

On mobile right now, you have the primary menu open when you click the toggle bars.

Sorry for all of the confusion – we’re going to get there 🙂

[Morgan]

Hey again, ok I totally rewrote the above, deactivated and *reactivated* the off-canvas while you were writing, sheesh! Have a read to get up to speed.

But I think key issue is:

There’s no off canvas menu, but it should display if you set it to “Desktop only” in Customize > Layout > Off Canvas Panel.

I *definitely do not* have a “Desktop only” option here.
(Man is this awaken theme bunk, or what!?).

[Tom]

You don’t see this in Customize > Layout > Off Canvas Panel?: http://prntscr.com/o52749

That’s a GP Premium feature regardless of the Site Library site you choose.

[Author]

Posts