Navigation Icons Menu

I need to customize my navigation by adding a special area on the right side with just three icons: basket, search, and wishlist. Can anyone suggest the best approach to achieve this? I am currently using the Divi theme for my website.

Furthermore, I attempted to use an icon instead of text for the wishlist link but it did not work as expected. I have installed the Font Awesome plugin and tried inserting the following code in the custom menu label:

( link to mentioned website )

<i class="fas fa-heart"></i>

Thank you.

htmlcssnavigationicons

Answer №2

One way to enhance your website is by creating a widget and placing it on the right side of the menu. To achieve this, you need to create a dynamic sidebar in your function.php file.

After creating the dynamic sidebar, you can add it as a widget in the appearance --> widgets section. To display the dynamic sidebar on a page, use the following code:

<?php dynamic_sidebar( 'sidebar name' ); ?>.


ul{
 list-style-type:none;
 padding:0
}
ul li{
display:inline-block;
}
ul li a{
 color:#000;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
  <li>
    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
  </li>  
  <li>
     <a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
  </li>
  <li>
     <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
  </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically submit a PHP form if the input text box is left blank

I need a way to automatically refresh the data on my page when the textbox is empty. Manually submitting the form works perfectly, but I want it to happen automatically if the textbox is empty. The catch is that I don't want the form to submit while t ...

javascriptphphtmlforms

Challenges with Z-index and layering dynamics

I'm having trouble getting z-index to work. I've searched online but can't find a solution. How can I make the .navigation class have a lower z-index than the .mobilenav and .mobilenavclosed classes so that they appear above everything else ...

htmlcssangularjsz-index

What is the technique for refining the exterior of an element while remaining within its parent container?

I need help with two elements that I have set up like this. .parent { height: 300px; width: 300px; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png"); backgrou ...

htmlcss

How to turn off the default print media query in Zurb Foundation 5 without relying on SASS

I've been having trouble with printing website pages that are built using Zurb Foundation 5. Whenever I try to print or preview the page, it defaults to the `medium` grid size and looks different from how it appears on the desktop version. I've ...

htmlcsszurb-foundation

Vue transition not functioning properly when hovering over text for changes

When you hover over the circular region on the website, the text and description in the red box will change. To add a fade animation effect when the text changes, I attempted to use <transition> as per the documentation provided in this link. Unfor ...

javascripthtmlcssvue.js

Transfer the information of a selected element to a different element

Hello, I am trying to transfer content from a child element to another element. In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "I ...

javascriptjqueryhtmlcss

Executing a function by click event using the onclick attribute from a file located in the public directory of my project (Next

I'm new to using Next.js and I have a question about how to utilize onclick to execute a function from an external file located in my public folder. Below is my index.js file: import Head from "next/head" import Script from "next/scrip ...

javascripthtmlnext.js

How to Position Icon on the Right Side of an Input Field using CSS

Is there a way to position the magnifying glass icon to the right side of my input field? Link to my Fiddle. @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); body { margin: 30px; } .search { position: relative; ...

htmlcss

Use JavaScript to limit Google Analytics and Yandex.Metrica to track only the referral sources and screen sizes

I prefer not to include external JavaScript on my website for unnecessary tracking purposes. However, I do need to gather referrer and screen size information, which cannot be achieved with a regular HTML img tag alone. What is the most standard-complian ...

javascripthtmlcssgoogle-analyticsyandex-api

Leverage the URL parameter with variables in HTML using AngularJS

I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...

javascripthtmlangularjs

Issue with Jdenticon icons not displaying correctly in ng-repeat loop

Recently, I started using the Jdenticon JavaScript library for generating user icons. This library allows me to input a hash and then render it as either SVG or Canvas. Here is an example code snippet: <svg width="200" height="200" data-jdenticon-has ...

javascripthtmlangularjssvgidenticon

How can one generate an HTML element using a DOM "element"?

When extracting an element from an HTML page, one can utilize a DOM method like .getElementById(). This method provides a JavaScript object containing a comprehensive list of the element's properties. An example of this can be seen on a MDN documentat ...

javascripthtmldom

Create an overlay that completely masks the height of a different element

Having a variety of elements on my screen that require overlays, I find myself facing a challenge. These elements come in different sizes and can be resized while the page is active. Although I managed to position overlays using CSS, the issue of 100% hei ...

jquerycss

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

What is the best way to start with maximum padding when in full screen mode, and then gradually decrease to minimum padding as the browser width decreases?

Trying to adjust my padding with the formula padding-left: clamp( 60px, calc( value - value ), 186px) but struggling to resize it correctly as I reduce my browser width ...

htmlcssfrontendweb-frontendclamp

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

javascriptjqueryhtmlcss

Unable to locate the hidden element

Attempt to access the attribute of a shadow element resulted in encountering ElementNotVisibleException Element with CSS input[type='checkbox'] is not present on screen <checkbox _ngcontent-ebv-c14="" label="User Access" ng ...

htmlcssseleniumselenium-webdriver

Update the font style of the navigation bar

Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...

htmlcssnavbar

What is the best way to incorporate visual indicators into specific columns containing certain keywords?

Is there a way to customize the script code responsible for displaying table data so that icons automatically appear next to specific keywords in the Gender column? For instance, can we have an icon like glyphicon glyphicon-heart-empty for Male and glyphic ...

htmlangularjs

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...

javascriptphphtmlmysqlcss