[Resolved] Put Icon inside navigation

Home Forums Support Put Icon inside navigation

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #988681
    GG

    Hi. I found this SVG link in a certain website which shows a mail icon. In that site, it was an anchor link for a popup form. I am planning to replicate that with my site and style it with CSS, but I would like to know how to hook it after the search icon in both desktop and mobile. I use navigation as header for desktop. How would I hook the icon as suggested? Thanks in advance.

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 564.8 490" style="enable-background:new 0 0 564.8 490;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#FF2842;}
    	.st1{fill:#FFFFFF;}
    </style>
    <path d="M464,64H48C21.5,64,0,85.5,0,112v288c0,26.5,21.5,48,48,48h416c26.5,0,48-21.5,48-48V112C512,85.5,490.5,64,464,64z
    	 M464,112v40.8c-22.4,18.3-58.2,46.7-134.6,106.5c-16.8,13.2-50.2,45.1-73.4,44.7c-23.2,0.4-56.6-31.5-73.4-44.7
    	C106.2,199.5,70.4,171.1,48,152.8V112H464z M48,400V214.4c22.9,18.3,55.4,43.9,104.9,82.6c21.9,17.2,60.1,55.2,103.1,55
    	c42.7,0.2,80.5-37.2,103.1-54.9c49.5-38.8,82-64.4,104.9-82.7V400H48z"/>
    <circle class="st0" cx="419.1" cy="145.6" r="141.4"/>
    <g>
    	<path class="st1" d="M422.3,58.3h18.8v174.6h-24.9V95.7h-18.8V77.1C407.7,73.2,417.4,67.8,422.3,58.3z"/>
    </g>
    </svg>
    #988805
    David
    Staff
    Customer Support

    Hi there,

    You can use

    inside-navigation and inside_mobile_meni_bar hooks

    It will require a little CSS to position them.

    #989143
    GG

    Okay. I cannot get it to show on the front end using inside-navigation hook. Tried several hooks. Not sure why. Here it is https://svgshare.com/s/Ecb. Maybe you can try in a test site and advise me what do do. Thanks. (I want it inline so it adapts to the colour of the GP icons.

    #989502
    David
    Staff
    Customer Support

    First off you won’t be able to get the SVG to grab the GP styles for coloring.
    Try this for the Primary Navigation ie. inside-navigation hook.

    Add a <a> tag around your SVG like so:

    <a href="url" class="nav-mail-icon">
    <!-- Add your SVG in here -->
    </a>

    Now we add a flex to the inside nav to get the icon in line with the menu items.
    We can then target the Icon with the class we added to our <a> tag. With this CSS:

    @media(min-width: 768px) {
        .main-navigation .inside-navigation {
            display: flex;
            align-items: center
        }
    
        .nav-mail-icon svg {
            height: 30px;
            order: 100;
        }
    }
    #989576
    GG

    Thanks a lot. I created a test page and edited the link in the original post so you can view it. I also hooked in the mobile menu bar as well for the same page. You can check it and advise how to position it further because on the desktop it shows before site name. (I will assign the popup link later. Thanks)
    NB: My mobile navigation begins at 900px.

    #989581
    David
    Staff
    Customer Support

    You’re limited to where you can place it but easy to do with the flex order property:

    1. Before Menu Items:

    .nav-mail-icon {
        order: 2;
    }

    2. After Menu Items:

    .nav-mail-icon {
        order: 10;
    }
    #989989
    GG

    Thanks. I needed that order in the CSS. Figured out the rest through google and now the button can toggle using some HTML and some vanilla JS. You can check it out through the updated link and maybe advise if there is anything else I could do to it.

    #989994
    David
    Staff
    Customer Support
    #989996
    GG

    Great! Thanks again.

    #989997
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.