Remove navigation menu but leave logo

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

You need to share your site url or template name.

3 minutes ago, tuanphan said:

You need to share your site url or template name.

colandovision.com   using the Bedford Template

@Colandovision Add to Home > Design > Custom CSS

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

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

@Colandovision Where did you insert? 

6 minutes ago, tuanphan said:

@Colandovision Where did you insert? 

under the advanced tab in The Page section/Home/Gear icon/Advanced/Page header code injection

44 minutes ago, Colandovision said:

under the advanced tab in The Page section/Home/Gear icon/Advanced/Page header code injection

Add my code in HOME > DESIGN > CUSTOM CSS

Do not edit anything in the code I sent

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?

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

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

Do you enable announcement bar?

28 minutes ago, tuanphan said:

Do you enable announcement bar?

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

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

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 🙂

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!

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!!

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>

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

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

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>

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. 

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.

@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.

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. 

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