Shopify themes, liquid, logos, and UX
I have been looking for a way to hide the "HOME" nav bar button from just my desktop site as the site logo directs back to the homepage so the "HOME" is redundant.
I have the logo hidden from the mobile version so I cannot remove the HOME button completely.
Tried using first child method but removed the first child from all the dropdowns.
pw = yaya
Any help would be greatly appreciated.
Thanks!
Solved! Go to the solution
This is an accepted solution.
Was able to figure out a solution.
Here is the code for those having a similar problem!
nav ul#AccessibleNav li:first-child {display: none;}
nav ul#AccessibleNav .site-nav--has-dropdown li:first-child {display:block !important;}
Please add the following code at the bottom of your assets/theme.scss.liquid file.
nav ul#AccessibleNav li:first-child {display: none;}
Hope this helps.
Thanks!
Thanks for the response!
That code also hides the first item in the dropdown boxes. Is there a way to specifically target the nav bar header only?
Please share screenshot what do you want!
Thanks!
I am trying to hide the JUST the Home button on the navigation menu.
That line of code you shared worked, but it also hid the first child in the Products dropdown menus.
Add this css for product drop down
nav ul#AccessibleNav .site-nav--has-dropdown{display:none;}
Thanks!
I am not looking to hide the dropdown - I am trying to hide JUST the "Home" button that is to the left of products.
The first line of CSS you shared hid the home button, but it affected the dropdown menus (which I did not want)
Let me know if you need any more clarity.
Thanks for your patience on this problem
Managed to unhide the dropdown first child (Baseball) as seen in the attached screenshot. Still having trouble unhiding the first item in the grandchild.
So this is what I have done so far:
Used this CSS to hide first child (Home, Baseball, Wax Boxes)
nav ul#AccessibleNav li:first-child {display: none;}
Used this CSS to UNhide first child in dropdown (which was Baseball)
nav ul#AccessibleNav .site-nav--has-dropdown{display:block !important;}
So I would like to UNhide the first child in the dropdown grandchild (which is Wax Boxes)
I was trying this code to no avail..
nav ul#AccessibleNav .site-nav__dropdown-grandchild{display:block !important;}
This is an accepted solution.
Was able to figure out a solution.
Here is the code for those having a similar problem!
nav ul#AccessibleNav li:first-child {display: none;}
nav ul#AccessibleNav .site-nav--has-dropdown li:first-child {display:block !important;}
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