[Resolved] Nav Search ::before Content

Home Forums Support [Resolved] Nav Search ::before Content

Home Forums Support Nav Search ::before Content

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #862244
    [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

    #862253
    [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:

    Thanks!

    #862360
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #862377
    [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!

    #863010
    Tom
    Lead Developer
    Lead Developer

    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.

    #863392
    [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!

    #863859
    David
    Staff
    Customer Support

    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: "]";
    }
    #864582
    [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!

    #865200
    Tom
    Lead Developer
    Lead Developer
    #875047
    [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?

    #875165
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.