Solved

Hiding Home Nav Bar Item from Desktop Site

kaiyacollects
Explorer
47 1 21

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.

 

www.kaiyascollectibles.com

pw = yaya

 

Any help would be greatly appreciated.

 

Thanks!

 

 

Accepted Solution (1)
kaiyacollects
Explorer
47 1 21

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;}

View solution in original post

Replies 9 (9)

prayagpatelDD
Excursionist
14 1 0

Hi @kaiyacollects 

Try this CSS

nav ul#AccessibleNav li:first-child {

display: none;

}

dmwwebartisan
Shopify Partner
12280 2546 3694

@kaiyacollects 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
kaiyacollects
Explorer
47 1 21

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?

dmwwebartisan
Shopify Partner
12280 2546 3694

@kaiyacollects 

Please share screenshot what do you want!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
kaiyacollects
Explorer
47 1 21

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.

1.pnghidden.png

dmwwebartisan
Shopify Partner
12280 2546 3694

@kaiyacollects 

Add this css for product drop down

nav ul#AccessibleNav .site-nav--has-dropdown{display:none;}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
kaiyacollects
Explorer
47 1 21

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

kaiyacollects
Explorer
47 1 21

Managed to unhide the dropdown first child (Baseball) as seen in the attached screenshot.  Still having trouble unhiding the first item in the grandchild.

fix.png

 

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;}

 

 

kaiyacollects
Explorer
47 1 21

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;}