Sticky nav hijinks - Ethos theme

Hi there,

The link you've provided expired. Any chance you could move it to a staging site so we could check?

Let us know.

EDIT: now live: screen.coach.

Updated issues for clarity:

1. Search icon shouldn't have orange background, should be white as expected, so should the X to close search.
2. I'm working on localhost, just reinstalled Windows and the nav changed height! It's now shorter than the search overlay. No idea.
3. The sticky is stuck, notice that if you scroll down and back up it doesn't unstick.
4. The customiser settings change the size of *both* the Primary logo AND Sticky-logo, and I'd like them to be different. I have it working, but CSS is a bit of a mess. Could you suggest simplest CSS to size/pad the Primary Logo + Sticky logo seperately?
5. How can I move the search icon before the phone # button?
6. Got in a fluster around breakpoints, is there any good example of use of breakpoints with ideally Ethos, for breakpoints across menu, pages/blogs featured-images you could point me to? I.e. I was guided here in building some pretty damn fancy fluid titles on last GP site, wondering if there's similiar, more recent, specific to Ethos - h1.entry-title {font-size: calc(38px + (38 - 6)*((100vw - 300px) / (1600 - 300) ))}

Anyone out there?

Hi Morgan,

1. This is coming from custom CSS in your parent stylesheet:

.main-navigation .menu-bar-item.search-item {
    z-index: 20;
    background: #ff4304;
}

It's never a good idea to change CSS in the parent files like this. Always use one of the methods here: https://docs.generatepress.com/article/adding-css/

2. I'm not sure what's going on with the navigation height here. Does it fix itself if you temporarily remove your custom CSS?

3. Same as the above - not seeing any reason why it's not un-sticking. Custom CSS?

4. Which settings are you using here?

5. You would need to add the phone number as a menu bar item: https://docs.generatepress.com/article/generate_menu_bar_items/

6. Ethos is simply a site built using GP/GPP - there isn't really anything specific to it vs. any other GP site - the same rules apply across all of them. When it comes to breakpoints, it's really up to your personal preference/design.

1.

1. This is coming from custom CSS in your parent stylesheet.

I hadn't intentionally touched the parent stylesheet, am using a child styles.css, but I suspect I accidentally added that to parent when testing chrome devtools overrides workfolders on localhost.
Woops, and thanks for the catch - was pulling my hair out!
I've just re-uploaded a clean parent theme and it's cleared.

2.

Does it fix itself if you temporarily remove your custom CSS?

There was extra css in Customizer css I don't remember putting there, weirdness with importing and going live, no idea. I think I'll blame my imaginary friend. Thanks again!

3. That was from the errant css in parent, RESOLVED!

I'll get back re the rest shortly.

4. Exact same issue: https://generatepress.com/forums/topic/navigation-as-header-and-logo-height-increase-size/ and the solution on there was: .main-navigation .navigation-branding img {height: 125px;} , but that didn't work for me and I've instead used: .main-navigation .site-logo img { height: 98px !important;}

5. So there's no way with something like: .menu-bar-items .search-item {order:-1;} ?

6. Ok, gotcha.

7. EDIT: Working now, prolly a cache issue.
The settings on TABLET here seem to have no effect : Customising ▸ Layout ▸ Primary Navigation ▸ Menu Item Height

8. I've now got the search overlay working like I want on sticky across breakpoints, but don't know how to change the default/top-of-page/unstuck version (which now looks wonky).

Hi there,

4. That CSS you're using ie.
.main-navigation .site-logo img { height: 98px !important;}

is perfectly valid - you shouldn't actually need the !important thought as your rule is more specific then the GP CSS.

5. No - the menu bar items are a container separate to the menu. The method Tom provides is the way to go.

8. Try this CSS:

.main-navigation:not(.is_stuck) .search-field {
  height: 98px;
}

4. Cool, thx.

5. Roger that.

8. Wunderbar!

9. I can't figure how to reduce top-padding/margin on the sticky nav, there's just a couple too many pixels and padding/margin with any css above isn't working, any tips?

9. The sticky nav doesn't have padding by default - its height is defined by the menu item set in Customizer > Layout > Sticky Navigation.

9. Hi, yes, I'm aware of that but a small top-margin still exists. I've tried setting a negative margin on: .sticky-enabled .main-navigation.is_stuck , nav#sticky-navigation , .header-wrap and sticky-navigation , doesn't work.

The element style is overriding it, and I don't know where this margin-top: 0 is coming from (changing that margin in devtools *does* affect it):

<nav id="sticky-navigation" class="has-branding has-sticky-branding main-navigation nav-align-right has-menu-bar-items sub-menu-right stuckElement is_stuck navigation-stick navigation-clone sticky-navigation-transition" . . . . margin-top: -20px; . . . .

Hi Morgan,

I'm not sure I understand you issue here.

Since the margin-topvalue is 0, why would there be a small margin on top visible?

And I do not see a margin top on the sticky navigation as well.

Did I miss something or could you explain some more?

I was about to edit my last post, I think I'd tried everything except nav#sticky-navigation {margin-top: -3px !important;} , with !important it works.

10. But I'd still like to know, which I should have been more clear about prior, where the margin-top: 0 is getting applied from. Is this hardcoded into theme, where exactly is this margin-top defined?

There's clear effective padding visually too, but I can't find it in devtools, I've played with the button padding, text (wondering is they were extending the height of nav), I still don't know. If I change the sticky-nav height in customizer below 58px, it doesn't reduce further, and and padding around text remains, so it's in there from somewhere.

11. How do I make all button sitewide like the outlined ones generated from GenerateBlocks on homepage: screen.coach? (Default aint really working :-P http://screen.coach/blog/ )

In lieu of replies.

10. Moved on.

11. Resolved the following by applying Ghost-button styling (https://docs.generatepress.com/article/adding-buttons/ ) to all buttons, with:

.button, .button:visited {
    background: transparent !important;
    border: 2px solid #FF4304 !important; } 
.button:hover, .button:active { 
    background: #FF4304 !important;
    color: #fff !important; }	

I'll close this and create new for anything else.