Site logo

[Resolved] CSS code for header element

Home Forums Support [Resolved] CSS code for header element

Home Forums Support CSS code for header element

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2138511
    Fredrick

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

    search and off canvan icon

    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.

    #2138513
    Fredrick

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

    #2138643
    Ying
    Staff
    Customer Support

    Hi Fredrick,

    Try this:

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

    Let me know if this helps 🙂

    #2138692
    Fredrick

    Looks great, thanks.

    Stream Search form

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

    #2138762
    Elvin
    Staff
    Customer Support

    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.

    #2138928
    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.

    #2138938
    Elvin
    Staff
    Customer Support

    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;
        }
    }
    #2138999
    Fredrick

    Thanks Elvin, Helpful as always. I appreciate

    #2139056
    Elvin
    Staff
    Customer Support

    No problem.:D

    #2139665
    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.

    #2139678
    David
    Staff
    Customer Support

    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.

    #2139810
    Fredrick

    Arigato Gosaimasu

    #2139825
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.