[Support request] Nav Search – "Search + Icon"

Home Forums Support [Support request] Nav Search – "Search + Icon"

Home Forums Support Nav Search – "Search + Icon"

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #647385
    Brett

    I would like to have the word “SEARCH” to the left of the search icon. I would also like to position the search to the far right.

    If I wanted to eliminate the search completely on the mobile, is that possible?

    Thank you!

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #647463
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a try:

    li.search-item a:after {
        content: "\f002";
        font-family: GeneratePress;
        width: 1.28571429em;
        text-align: center;
        display: inline-block;
    }
    
    li.search-item a:before,
    li.search-item.close-search a:before  {
        content: "Search";
        font-family: inherit;
        width: auto;
        margin-right: 5px;
    }
    
    li.search-item.close-search a:after {
        content: "\f00d";
    }
    
    @media (max-width: 768px) {
        .search-item {
            display: none !important;
        }
    }

    Let me know πŸ™‚

    #648273
    Brett

    I think we are really close. πŸ™‚

    1. I have the “Search + Icon” on the desktop. YEAH!! Is there a way to force “just it” all the way to the right?
    2. When I go to tablet or mobile mode it is completely gone. YEAH, however, my background is gone and section one image is behind the logo and hamburger.

    Any ideas?

    Thank you!

    #648577
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to your site so I can take a look? πŸ™‚

    #651679
    Brett

    Not at this time. In the code above, I was able to use all the code, except the media query piece at the bottom. If I figure it out, I’ll let you know.

    Thanks!

    #651951
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.