Archived topic

Nav Search - "Search + Icon"

5 replies · Started by Brett on August 13, 2018

Viewing posts 1–6 of 6

August 13, 2018 at 4:48 pm #647385

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!

August 13, 2018 at 7:55 pm #647463

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 :)

August 14, 2018 at 1:19 pm #648273

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!

August 14, 2018 at 7:15 pm #648577

Any chance you can link me to your site so I can take a look? :)

August 17, 2018 at 4:57 am #651679

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!

August 17, 2018 at 8:41 am #651951

Sounds good :)

This archived topic is closed to new replies.

Start building better websites today.