[Support request] Too much space at bottom of sticky menu

[paddyd]

https://fontra.com/design/

I’ve managed to get everything else sorted with custom CSS – got the nav menu to align with the bottom of the logo, managed to get the search icon to do likewise, but somewhere along the line, the sticky menu acquired about 100px more space on the bottom than I’d like. I can see that there is a box height of 274px when I look at the computed layout, but I can’t figure out how it got that, nor where to change it. Nothing I’ve done has made it go away – I can’t find any extra padding or margin…stumped!

[Ying]

Hi there,

It’s coming from the search icon line height:
https://www.screencast.com/t/d6uuY2OG

It doesn’t look like coming from GP, could you check? 🙂

Let me know!

[paddyd]

That 149px is (I assume) coming from the setting for the Menu Item Height in Customization->Layout-> Sticky Navigation.

If I set it at something less, the logo vanishes.

The search icon had padding-top of 105px to make it line up with the rest of the menu. Otherwise it floats midway in the 149 (more or less) px and looks ridiculous. I can make the space at the bottom of the sticky menu go away if I take that padding off, but then the search icon ends up floating above the menu.

In fiddling with the custom CSS, I realized I could actually make put the search icon ABOVE the menu – and with a little negative margin-left, make it line up. But it hasn’t made the extra white space problem go away – and has introduced ANOTHER issue – if you hover over the search icon when the sticky menu is active, it then covers up part of “Contact”. I’m actually ok with the search icon above – I was trying to get it there earlier and didn’t succeed.

So two problems:
1. search icon height (being dictated by menu item height)
2. search icon height causing it to cover “Contact” in the sticky menu when hovered over. #2 is obviously related to #1, but I don’t know how to fix it.

[David]

Hi there,

if you simply want to align the Navigation/Search to the bottom of the header.
Then remove the CSS you have added.
Set the Customizer > Layout > Primary Navigation –> Menu Item Height to reasonable value eg. 60px
And add this CSS:

#site-navigation .inside-navigation {
    align-items: flex-end;
}

[paddyd]

Thanks, David – yes, that works. (I’ve done what you suggested – have a look). BUT the problem is, that wasn’t actually what I was aiming for – was trying to keep the site logo big. (it’s a fussy logo* – and it is pretty much a green and blue blob at 65 px high) That was why I had all the extra CSS in the first place to get the menu where I wanted it, and to wrestle the search icon into place.

However, I’m not sure I’ll not just go with https://fontra.com/design2/. It irks me that it’s somewhat similar to another site I just did…LOL. But sometimes there are only so many ways you can get a LONG organization name, a fussy logo and a menu in there. A very LOOOONG menu (too long – I know, but working on the client on this one…)

*Just discussing redesign of the logo has apparently proven contentious…this is a volunteer organization, so it would probably take a few years. 😉 Sometimes, it’s better to let sleeping dogs lie.

[Elvin]

Hi paddyd,

Have you sorted it out?

Can you provide a mockup image of how you want it to be laid out? So we have a clearer idea of what’s the layout to be achieved.

Are you aiming for something like this? – https://share.getcloudapp.com/JruDwRpk

If so, you should remove these:

@media(min-width: 1040px){.menu-bar-item.search-item {padding-bottom: 20px;margin-left: -45px;}

@media(min-width: 1040px) {
    .main-navigation .inside-navigation .main-nav>ul li a {
        line-height: 1.2em;
        padding-top: 105px; 
        padding-bottom: 20px;
    }
}

[paddyd]

Elvin, what I was aiming for is what is there now – except without the problem of the Contact link being obscured by the background on the search icon when the search icon is hovered over.

If I remove the custom CSS, then the menu is centred vertically on the space (as per your video) – rather than lining up with the bottom of the logo. Not what I want. If there is a way to solve this issue, I’d be interested.

Another option is to add an actual search box to the area on the right side above the menu… would that be possible with something like this: https://generatepress.com/forums/topic/search-field-in-404-page/#post-1159973 – and then use a hook to put it above the menu and floated right?

[David]

You could use a Block Element to add a Search Block to the generate_menu_bar_items hook – once its in place we can help with some CSS to position it.

[Author]

Posts