[Resolved] Nav Search ::before Content

[[SWEG]Tech]

Hello,

Working on our first website (sorry!). Trying to achieve brackets around our button text as a hover effect. Mostly works well, with the exception of the GP Nav Search and GP Cart. Finding that both of these utilize ::before content, which is then overwritten by the only way I could think of doing this:

.main-navigation a:hover::before, .secondary-navigation a:hover::before {
content: “[“;
}
.main-navigation a:hover::after, .secondary-navigation a:hover::after {
content: “]”;
}

is there a way around this?

Thanks,
Jared

[[SWEG]Tech]

…and a follow up:

Would it be possible to remove the absolute-positioned block with the search form, and integrate it into the button block itself? The goal would be to expand the button to fill the remainder of the nav container. Here is my shopped rendition:

[img]https://i.imgur.com/bEd294F.jpg[/img]

Thanks!

[Tom]

Hi there,

Give this a shot:

.main-navigation a.cart-contents:before {
    content: "[\f07a";
}

.main-navigation .search-item a:hover:before {
    content: "[\f002";
}

The achieve that kind of layout, you could try something like this:

.main-navigation .search-item.active a:before {
    content: "\f002";
}

.nav-search-active:before {
    content: "[";
}

.nav-search-active {
    display: flex;
    align-items: center;
}

[[SWEG]Tech]

Thanks for the reply! I thought about your solution:

.main-navigation a.cart-contents:before {
content: “[\f07a”;
}

but I wouldn’t be able to control color/transition of the bracket independently.

I’ll try out the search bar now. Thanks!

[Tom]

In that case, you may need to replace the font icon with an SVG. Then you can use the :before and :after just for the brackets.

[[SWEG]Tech]

Sorry, very new to this. Do you have an example of how this would be done? Or point me to a source I could read? Also, does GP have SVG available for the “search” and “cart”. “Search” in particular is much cleaner than FA IMO.

If I had to take a guess, I’d say some modification of html would be needed? I can manage the CSS for the most part but I don’t know the slightest about html.

WORKS

<li id="menu-item-###" class="...">
  <a href="http://.../my-account/">
    <i class="fas fa-user"> == $0
      ::before

ISSUE

<li class="search-item" title="Search">
  <a href="#">
    ::before

SOLUTION?

<li id="search-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-search">
  <a href="#">
    <i class="gps gp-search"> == $0
      ::before

As always, greatly appreciate the help!

[David]

Hi there,

just to throw in a possible alternative you could add the :before and :after to the li which would leave the search icon alone and both could be targeted separately with CSS, something like this:

.main-navigation li.search-item {
    display: flex !important;
    align-items: center;
}
.main-navigation li.search-item:before {
    content: "[";
}
.main-navigation li.search-item:after {
    content: "]";
}

[[SWEG]Tech]

Using li is looking promising. This opened up a few new issues but they’re likely due to pre-existing child style overrides. I’ll try to work through them.

In the meantime, thank-you both for the ideas, greatly appreciated!

[Tom]

Glad we could help! 🙂

[[SWEG]Tech]

Brackets seem to be under control. Still struggling with search though:

http://swegtech.com/

Looks like there are two elements that slide out, one starts farther right than the other (more translucent). Do you have any suggestions for this?

Also, position is absolute in order to not affect the menu buttons. Is there a way to have it expand to the 100% of the .main-navigation width, if .main-navigation is 30% of the .inside-header width?

[Tom]

Not too sure what you mean by the first question – I’m not seeing a second element. Is it still happening?

Try this to make it go full width:

.inside-navigation {
    position: static;
}

[Author]

Posts