Jump to content

Remove navigation menu but leave logo

Recommended Posts

Posted (edited)

Im trying to remove the navigation menu from my home page but leave the logo at the top. I can only find answers on removing the entire header along with it, I need to be able to leave the logo untouched. Any solutions? Using the Bedford template

Edited by Colandovision
Posted
41 minutes ago, tuanphan said:

@Colandovision Add to Home > Design > Custom CSS


/* Remove nav desktop */
div#headerNav {
    display: none !important;
}
/* Remove nav mobile */
.mobile-nav-toggle {
    display: none;
}

 

These did not change anything for me. I can use <style>#header {display:none}<header>  to remove the entire header, but nothing else seems to work when I put in those codes in. Is there something Im writing wrong? I copied and pasted and tried many variations of that

Posted
14 minutes ago, tuanphan said:

Add my code in HOME > DESIGN > CUSTOM CSS

Do not edit anything in the code I sent

Wow thank you that did in fact work, Although I was hoping only to remove it from the home page and not the entire website. Is this possible?

Posted
Just now, Colandovision said:

Wow thank you that did in fact work, Although I was hoping only to remove it from the home page and not the entire website. Is this possible?

Try this code

/* Remove nav desktop */
.homepage div#headerNav {
    display: none !important;
}
/* Remove nav mobile */
.homepage .mobile-nav-toggle {
    display: none;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
7 minutes ago, tuanphan said:

Try this code


/* Remove nav desktop */
.homepage div#headerNav {
    display: none !important;
}
/* Remove nav mobile */
.homepage .mobile-nav-toggle {
    display: none;
}

 

Thank you so much, finally things look great! appreciate it. Only problem I see is that now there is a black bar above just the homepage i cant get rid of ? Every other page seems fine

Screen Shot 2019-11-03 at 11.21.09 PM.png

Posted
33 minutes ago, Colandovision said:

nope it is already disabled, so this is frm something else. strange.

You inserted this code in Header, remove it

/* Remove nav desktop */
div#headerNav {
    display: none !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
1 hour ago, tuanphan said:

You inserted this code in Header, remove it


/* Remove nav desktop */
div#headerNav {
    display: none !important;
}

 

Ok thanks so much. That worked. my mistake. Thanks for all your help 🙂

  • 2 months later...
Posted

Hi, this seems very similar to the code I need, I suppose! I am using AVIATOR and I want to take the logo and navigation menu from other pages within my site. Is there a general code for other pages than the homepage? Many thanks!

  • 11 months later...
Posted
On 11/4/2019 at 12:59 AM, tuanphan said:

Try this code


/* Remove nav desktop */
.homepage div#headerNav {
    display: none !important;
}
/* Remove nav mobile */
.homepage .mobile-nav-toggle {
    display: none;
}

 

Hi! I am trying to keep the logo but remove the menu in header and then remove the footer fully on only 1 page.

Can you help provide the code for 7.1? https://tamarin.health is the website

<style>.header, #footer-sections {display:none!important;}
  </style> 

I used that earlier but it removed the logo, too. 

Thank you!!

Posted
20 hours ago, kak said:

Hi! I am trying to keep the logo but remove the menu in header and then remove the footer fully on only 1 page.

Can you help provide the code for 7.1? https://tamarin.health is the website

<style>.header, #footer-sections {display:none!important;}
  </style> 

I used that earlier but it removed the logo, too. 

Thank you!!

Add this code to Page Header

<style>
  .header-nav, .burger-box {
    visibility: hidden;
}
  footer.sections {
  	display: none;
  }
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 year later...
Posted
1 hour ago, jsl_pentaform said:

This script as a code block seems to work better in 2022 

 

<style>
#header { display: none }
</style>

Yes. Your code works if you need to hide whole header

If you need to hide Navigation Bar only, use this code

<style>
  .header-nav, .burger-box {
    visibility: hidden;
}
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 4 weeks later...
Posted

Hi tuanphan, Thank you for writing and sharing this code. I have the same problem, but when I pasted your new 2022 code under Custom CSS, it said Syntax Error Line 1.

I want my logo at the top, no navigation menu on the top right. The computer version, looks fine. The mobile version, there are two horizontal lines.  How can I get rid of those? When clicked on, a light green box appears and the only choice is to hit the X at the top. 

Screen Shot 2022-07-26 at 6.21.28 PM.png

Screen Shot 2022-07-26 at 6.21.36 PM.png

Posted
On 7/4/2022 at 4:42 PM, tuanphan said:

If you need to hide Navigation Bar only, use this code

<style>
  .header-nav, .burger-box {
    visibility: hidden;
}
</style>

I reread this and see I needed to put the code into each page's header advanced>page header code injection area. I did that on each page and it worked! Thank you. It's still possible to click that hidden area and get the empty green box. Is there a way to omit the link entirely or am making this harder than necessary? My site isn't live yet.

Posted

@tuanphan I noticed a photo friend was having the same error on her page with the hamburger box/menu displaying incorrectly in mobile view. I told her this morning and her IT guy fixed it immediately. It's not hidden, it's totally gone. Plus she's able to have a button on the upper right in her desktop view. That's what I'd like: no menu in mobile, a button in desktop. This is her website:  https://kdaltonphotography.com/ if you want to see.

Posted
On 7/27/2022 at 7:27 AM, Beautiful22 said:

Hi tuanphan, Thank you for writing and sharing this code. I have the same problem, but when I pasted your new 2022 code under Custom CSS, it said Syntax Error Line 1.

I want my logo at the top, no navigation menu on the top right. The computer version, looks fine. The mobile version, there are two horizontal lines.  How can I get rid of those? When clicked on, a light green box appears and the only choice is to hit the X at the top. 

Screen Shot 2022-07-26 at 6.21.28 PM.png

Screen Shot 2022-07-26 at 6.21.36 PM.png

I said add that code to Page Header. DO not add to Custom CSS.

If you need to do it on side wide, add this to Design > Custom CSS

.header-nav, .burger-box {
    visibility: hidden;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.