Jump to content

Hide Nav Items on desktop only (or Show on Mobile Only)

Recommended Posts

Site URL: https://pletttruckrepair.ca/

I would like to have 2 phone numbers linked in the main navigation menu only on mobile, not on desktop. I would like desktop navigation menu to remain exactly as it is. Most answers for this type of thing are using collection id, but from what I understand that only works with pages not with external links (phone numbers in this case). 

SS 7.0 Bedford theme

Any help would be much appreciated. 

@tuanphan (looks like you have provided solutions to very similar questions)

Link to comment

You can add 2 phones to Navigation, I can give code to hide them on desktop.

I would like desktop navigation menu to remain exactly as it is

You mean force desktop menu on mobile?, not 3 lines icon?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
47 minutes ago, tuanphan said:

You can add 2 phones to Navigation, I can give code to hide them on desktop.

Yes that is exactly what I want to do. Please.

"i would like desktop navigation menu to remain exactly as it is" - just meaning on the desktop version I want to keep it as it currently is on desktop (only change the mobile menu). I don't want to force desktop menu on mobile.

Edited by truckingitup
clarification
Link to comment
9 hours ago, truckingitup said:

Yes that is exactly what I want to do. Please.

"i would like desktop navigation menu to remain exactly as it is" - just meaning on the desktop version I want to keep it as it currently is on desktop (only change the mobile menu). I don't want to force desktop menu on mobile.

Yes that is exactly what I want to do. Please.

Please add phones first. I can't check phones code..

"i would like desktop navigation menu to remain exactly as it is" - just meaning on the desktop version I want to keep it as it currently is on desktop (only change the mobile menu). I don't want to force desktop menu on mobile.

Can you clarify more? I still don't get your point.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/1/2020 at 1:53 AM, tuanphan said:

Yes that is exactly what I want to do. Please.

Please add phones first. I can't check phones code..

"i would like desktop navigation menu to remain exactly as it is" - just meaning on the desktop version I want to keep it as it currently is on desktop (only change the mobile menu). I don't want to force desktop menu on mobile.

Can you clarify more? I still don't get your point.

Okay just put the phones up and now the desktop nav looks awful. Hope you can get back to me quickly...

 

All i mean is i dont want the solution to impact the look of the desktop nav. 

Link to comment

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.external {
    display: none !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
16 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (min-width:641px) {
.external {
    display: none !important;
}
}

 

This is great, but now my desktop button that used to be on "Contact" is gone and is highlighting one of the phone numbers on mobile. 

Ideally, the solution would allow me to keep the nav button on the desktop version and allow me to have the two phone numbers as nav buttons on mobile too. (which I know makes it a bit complicated and an addition to my original question. I looked at other forum questions but none of the code worked for me, even after playing with it a little... being inexperienced in code didn't help. Thinking its an n-th solution similar to this (https://forum.squarespace.com/topic/80979-how-to-add-a-call-to-action-button-in-main-navigation-hyde-template/#comment-336343) but it wouldn't work for me... a little more help please?

 

Link to comment

To make contact to button, add this to Home > Design > Custom CSS

#mainNavigation [href="/contact"] {
    background: white;
    color: black;
    border-radius: 10px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...
On 3/31/2020 at 6:59 PM, tuanphan said:

You can add 2 phones to Navigation, I can give code to hide them on desktop.

Could I get this code? My navigation includes a folder, and I figured out how to hide that on mobile, but I want to add a link and page that show up in its place (show on mobile only/hidden on desktop). I'm using the Wells template. Thanks so much!

www.jordangraceowens.com

Link to comment
On 2/27/2021 at 9:05 PM, jgo said:

Could I get this code? My navigation includes a folder, and I figured out how to hide that on mobile, but I want to add a link and page that show up in its place (show on mobile only/hidden on desktop). I'm using the Wells template. Thanks so much!

www.jordangraceowens.com

You can add first, then share url again, we can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.