Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
RESB

How do I hide the navigation bar on a landing page?

Question

16 answers to this question

Recommended Posts

  • 4

If you inject the following code on the page it seems to do the trick really well. The unintended consequence is the main banner is hidden as well. It is easy enough to just add a block that looks like the banner so the problem is solved.

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

Edited by RESB

Share this post


Link to post
  • 3

You could hide just the navigation bar (and keep the original banner) by using this CSS instead:


.primary-nav { display: none; }

Share this post


Link to post
  • 1

Use the class selector to set the display to none. This will keep your banner at the top of the page, but not your navigation.

.Header-nav-item{ display: none; }

Share this post


Link to post
  • 0

[page ID] #collection-51b08e86e4b0e8d244ddb638 [Logo style] {img src="item/51b86ecae4b06b939d356f95?format=original" ; display: none; }

I tried this but it stilll gives an error. I know something is wrong but I don't have any idea where the problem is. I hope you could help me with it.

Share this post


Link to post
  • 0

[page ID] #collection-51b08e86e4b0e8d244ddb638 [Logo style] {img src="item/51b86ecae4b06b939d356f95?format=original" ; display: none; }

I tried this but it stilll gives an error. I know something is wrong but I don't have any idea where the problem is. I hope you could help me with it.

Share this post


Link to post
  • 0

where is the navigation, it doesnt seem to be showing at all :). I must be going mad over here, unless you have already hidden it.

willing to help out

EDIT

.mobile-nav, .show-nav {display: none;}That shows your nav being on this particular page as being hidden. Do you want that hidden or not.

Also are you making the page your working on to be the landing page? or is just a test.

Edited by henry puttick

Share this post


Link to post
  • 0

Hi - I can see you have hidden the navigation and banner on your site. But when I try to do this on mine it doesn't work. I don't think that it is because of caching because when I view source code I can see that the source code is there. Are you doing something else?

Share this post


Link to post
  • 0

I did not do anything other than using the code injection block. Sorry. I am quite new to all of this. if you do find what the hangup is I would love to know so that I can avoid it. Thanks

Share this post


Link to post
  • 0

I'm not sure what template you're using, so it might vary, but using the FIVE template, you can remove the logo but leave the navigation in using this CSS:


#collection-yourcollectionid123456789 #banner-wrapper { display: none !important; }

Share this post


Link to post
  • 0

Hey community,I am trying to make a splash page before my official launch of my website. I have two buttons on my page, one that says "SUBSCRIBE" and the other a "Contact us" form. My goal is once the subscribe button is clicked, it'll lead to a subscribe to newsletter page. However, on this specific page, I want the navigation bar gone but the Logo and logo title to remain.

I've tried entering this in "advance" for my subscribe page with; ".primary-nav { display: none; }" but it doesn't work. I'm a complete newbie at this!

I've also used this CSS: "l" which works, but removes the navigation bar and logo. Please help!

Thank you :)TSB

Share this post


Link to post
  • 0

I just wanted to add that in the Five template it doesn't work with just #header it is #page-header-wrapper in the menu Configure page --> Advanced --> Page header Code injectionThis removes everything on the top of your page:


<style> #page-header-wrapper { display: none; } </style>

I use Chrome to help find the id, you can right click on an element of a page an choose "Inspect" in the menu, it will open the source code at the position of that element and marks this section. There you find also the id= "#page-header-wrapper" ...

If you go just on the logo you will see that it maybe has a different id, so you can find the element id's within the page-header-wrapper if you want to hide things separately.

The page-header-wrapper is everything on top of the page, so on my page there is no navigation, no logo or background banner visible and the rest of the page moves up.

Hope that helps others to identify id's and hide things on single pages.

Edited by Iris

Share this post


Link to post
  • 0

Signing in to Office allows you to make, alter, and share your documents. Subsequent to marking in, you're consequently marked in to online administrations like Office Online or OneDrive. Overseeing office 365 membership is simple, get all choice for installment download office reestablishment and scratch-off.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...