[Resolved] CSS code for header element

[Fredrick]

The hamburger icon [off canvas menu] and search icon on my generate press primary menu and header are too close to each other.

Is there a CSS code or an option in the customization area that I can use to create a little gap between these two element?

It would be helpful if you can help out. Thanks.

[Fredrick]

My generate press is using “Stream” from the site liberary

[Ying]

Hi Fredrick,

Try this:

@media (max-width: 768px) {
    .menu-bar-item.search-item {
        padding-right: 20px;
    }
}

Let me know if this helps 🙂

[Fredrick]

Looks great, thanks.

The search form on desktop looks weird. It there any setting to fix that?

[Elvin]

Hi Frederick,

Do you have any specific preference of how you want it to look like? Perhaps provide a mockup image of the preferred layout?

While waiting, can you try going to Appearance > Customize > Blog > header and check “Use Navigation as Header”? Perhaps it effects on the layout fits your preference.

[Fredrick]

No, Navigation as header didn’t look so great

The search form looks like it has anemia but looks good on mobile… I’d like it to be bolder like the default GP search form. I’ve put both forms side by side.

[Elvin]

Can you specify how you want it to look like?

Would something like this be ok? https://share.getcloudapp.com/04uEmNDl

If yes, you can add this CSS:

@media (min-width:769px){
    .inside-navigation.grid-container {
        position: static;
    }
    
    form.search-form.navigation-search.nav-search-active {
        top: 50%;
        transform: translateY(-50%);
        height: 100%;
    }
    
    
    input.search-field {
        height: 100% !important;
    }
}

[Fredrick]

Thanks Elvin, Helpful as always. I appreciate

[Elvin]

No problem.:D

[Fredrick]

I’d like to point out one more thing before I close this ticket.

GP labels widget title as H2. As an SEO, I think that’s kind of disturbing. Is there anywhere I can change widget title from H2 to P. I wasn’t able to find the option even in the typography section.

[David]

Hi there,

Widget titles output by the theme can be changed using this snippet:

add_filter( 'generate_start_widget_title', function() {
    return '<h3 class="widget-title">';
} );

add_filter( 'generate_end_widget_title', function() {
    return '</h3>';
} );

you can change the HTML tags to whatever SEO finds less disturbing today 🙂

OR If in latest versions of WP you have the block editor in the widgets so you can add your blocks for your titles.

[Fredrick]

Arigato Gosaimasu

[David]

Glad to be of help

[Author]

Posts