Shopify themes, liquid, logos, and UX
Hello all,
I want to add a feature where the active navigation menu will be underlined. I tried similar solutions posted to the community but it did not work out for me. Please provide suggestions regarding the feature.
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
Hello,
Following is the link and view access.
https://love-and-above-cat-club.myshopify.com/
p/w: LAACC
Please add the following code at the bottom of your assets/theme.css file.
a.site-nav__link.site-nav__link--underline:active {
text-decoration: underline;
}
Hope this helps.
Thanks!
Hello @dmwwebartisan,
When i click on the main menu option such as the "About" page, it underlines when I click on the menu but it does not remain underlined on the active page.
Please remove last code and add this new code.
.site-nav__link.site-nav__link--underline:active {
border-bottom-color: #000000;
content: "";
display: block;
bottom: 0;
left: 0;
right: 100%;
margin: 0 15px;
border-bottom: 2px solid;
border-bottom-color: #594e4f;
border-bottom-color: var(--colorNavText);
transition: right 0.5s;
}
Let me know if this works.
Thanks!
Hello @dmwwebartisan,
It's the same issue again. It still doesn't remain underlined in the active menu option.
"Active" should work but it seems it is not working. I will check more and get back to you with a solution.
Remove the old code that I have given for now.
Hello @dmwwebartisan,
I appreciate your time and effort. Please let me know if you have any suggestions for the solution.
Regards,
Binesh
Please add the following code at the bottom of assets/theme.js file ( remember this is js code)
$(function(){
var current = location.pathname;
$('#nav li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
When you put this, let me know. I will provide you CSS and we will check if this works.
Thanks!
Hello @dmwwebartisan ,
I have added the code as per request. Please look into it.
Thank you for the help!
Regards,
Binesh
Please remove previous code from assets/theme.js and add this new one.
$(function(){
var current = location.pathname;
$('.site-nav li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
Please add the following code at the bottom of your assets/theme.scss.liquid file.
.site-nav__link--underline.active {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 100%;
margin: 0 15px;
border-bottom: 2px solid;
border-bottom-color: #594e4f;
border-bottom-color: var(--colorNavText);
transition: right 0.5s;
}
Thanks!
Remove previous code of theme.scss.liquid file and add this new one.
.site-nav__link--underline.active {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 100%;
margin: 0 15px;
border-bottom: 2px solid;
border-bottom-color: #594e4f;
border-bottom-color: var(--colorNavText);
transition: right 0.5s;
}
Remove old and add this new one. This should work.
Let me know.
.site-nav__link--underline.active {
content: "";
display: inline-flex;
position: relative;
bottom: 0;
left: 0;
right: 100%;
margin: 0 15px;
border-bottom: 2px solid;
border-bottom-color: #594e4f;
border-bottom-color: var(--colorNavText);
transition: right 0.5s;
}
Hello @dmwwebartisan,
When I click on the "home" menu. every available menu is underlined. The rest of the navigation menus seems to be underlined.
Please look into it.
Js is giving a problem, I think. This takes a long time. Can you give staff access? If not then provide a theme zip if possible.
I will look into it and provide a solution here.
Thanks!
Hello @dmwwebartisan,
Please let me confirm whether I can provide you with the staff access.
Regards,
Binesh
You can send it to my email which is in my signature below.
I will look into it and give you a solution by tomorrow.
Thanks!
Hello @dmwwebartisan,
If possible, I will send you the theme file or provide staff access.
I really appreciate your help
Regards,
Binesh
Any update
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024