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

Removing header on a couple of pages


Recommended Posts

Site URL: https://www.ortner-china.com/

Dear all,

I currently have a number of pages for which I have used the following code to switch off the header. However, I feel the code might be faulty, since it does sometimes show up a plane, blue colored header (see images attached).

<style>
  .page-banner-wrapper {display:none;}
</style>

I'd like to turn off the header for all pages but the home page. Could anyone suggest an alternative style code to do so? Thanks! 

屏幕快照 2021-05-19 上午10.28.10.png

屏幕快照 2021-05-19 上午10.28.20.png

Link to comment
  • Replies 38
  • Created
  • Last Reply

Top Posters In This Topic

On 5/24/2021 at 4:46 PM, tuanphan said:

Edit page where you want to remove header >> Add a Code Block (anywhere) >> Paste this code


<style>
  header#header, .mobile-bar-wrapper {
    display: none;
}
</style>
  

image.thumb.png.bcdfd974bad2f25cc86a47a3f136a74c.png

Hi, thank you. I think this code only hides the banner on mobile devices, how can I hide it on desktop and on mobile?

Link to comment
5 hours ago, P_O said:

Hi, thank you. I think this code only hides the banner on mobile devices, how can I hide it on desktop and on mobile?

Use this

<style>
  header#header, .mobile-bar-wrapper, .page-banner-wrapper {
    display: none;
}
</style>
  

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
15 hours ago, tuanphan said:

Use this


<style>
  header#header, .mobile-bar-wrapper, .page-banner-wrapper {
    display: none;
}
</style>
  

 

I think this one works great, thank you!!

Link to comment
19 hours ago, tuanphan said:

Use this


<style>
  header#header, .mobile-bar-wrapper, .page-banner-wrapper {
    display: none;
}
</style>
  

 

I seem to still get the header error on mobile, please see image. 

2461622114498_.pic.jpg

Link to comment
  • 3 months later...
On 5/28/2021 at 5:09 PM, tuanphan said:

Mobile looks fine here. Try reload the page

Hi tuanphan, I am very sorry to bother you again, but the header issue hasn't been resolved (on both mobile and desktop). After you've entered the paged, and changed pages between projects and profile a couple of times, you will see that a blue header appears, which should be off. I hope you can help me solve the problem! Thanks

Link to comment
14 hours ago, P_O said:

Hi tuanphan, I am very sorry to bother you again, but the header issue hasn't been resolved (on both mobile and desktop). After you've entered the paged, and changed pages between projects and profile a couple of times, you will see that a blue header appears, which should be off. I hope you can help me solve the problem! Thanks

Try access Design > Site Styles > Disable Ajax Loading & check again

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
13 minutes ago, tuanphan said:

Try access Design > Site Styles > Disable Ajax Loading & check again

Hi, I think it works now, thank you very much! How do I make it so the header menu is still visible, but the banner image isn't (on all pages apart from the Homepage)

 

 

Link to comment
22 hours ago, tuanphan said:

Try access Design > Site Styles > Disable Ajax Loading & check again

Hello, apart from my question above, how do I slightly increase the size of the new logo on mobile? thank you

Link to comment
22 hours ago, tuanphan said:

Try access Design > Site Styles > Disable Ajax Loading & check again

Logo problem solved. Please can you tell me how to make the menu bar visible while disabling the banner image on some pages?

Link to comment
22 hours ago, tuanphan said:

Try access Design > Site Styles > Disable Ajax Loading & check again

Sorry again! Please check mobile banner. How do I make the image smaller so it looks a bit like the desktop banner? thank you

Link to comment
1 hour ago, tuanphan said:

Hi,

Can you list all problems in one comment? We can check easier

1. Remove banner image in all pages apart Home, but keep menu bar on top.

2. Logo in Footer on Mobile too large, how to keep size of the logo image in footer same on desktop, but smaller on mobile?

 

Thank you

Link to comment
21 hours ago, P_O said:

1. Remove banner image in all pages apart Home, but keep menu bar on top.

2. Logo in Footer on Mobile too large, how to keep size of the logo image in footer same on desktop, but smaller on mobile?

 

Thank you

#1. Add to Design > Custom CSS

/* remove banner */
body:not(#collection-5e0b9f039df9c819e0e5f32b) .page-banner-wrapper {
    display: none;
}

#2. Use this CSS

/* Mobile logo size */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1632811385765_10148 {
    width: 50% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
13 minutes ago, tuanphan said:

#1. Add to Design > Custom CSS

/* remove banner */
body:not(#collection-5e0b9f039df9c819e0e5f32b) .page-banner-wrapper {
    display: none;
}

#2. Use this CSS

/* Mobile logo size */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1632811385765_10148 {
    width: 50% !important;
}
}

 

/* remove banner */
body:not(#collection-5e0b9f039df9c819e0e5f32b) .page-banner-wrapper {
    display: none;
}

 

This code doesn't have any effect. 

 

I am currently using this code on all individual pages  to remove the banner.

<style>
  header#header, .mobile-bar-wrapper, .page-banner-wrapper {
    display: none;
}
</style>

 

Shall I delete the code on the individual pages and just inlcude your code in the design CSS?

Link to comment
23 hours ago, P_O said:

/* remove banner */
body:not(#collection-5e0b9f039df9c819e0e5f32b) .page-banner-wrapper {
    display: none;
}

 

This code doesn't have any effect. 

 

I am currently using this code on all individual pages  to remove the banner.

<style>
  header#header, .mobile-bar-wrapper, .page-banner-wrapper {
    display: none;
}
</style>

 

Shall I delete the code on the individual pages and just inlcude your code in the design CSS?

try remove code from some page header & add this new code to Custom CSS

/* remove banner */
body:not(#collection-5e0b9f039df9c819e0e5f32b) .page-banner-wrapper {
    display: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
6 minutes ago, tuanphan said:

try remove code from some page header & add this new code to Custom CSS

/* remove banner */
body:not(#collection-5e0b9f039df9c819e0e5f32b) .page-banner-wrapper {
    display: none !important;
}

 

Thank you for your reply. It kind of works, but whenver I change page, it first quickly shows the blue banner, and then it dissappears again, is this some kind of bug? maybe we need an extra code on the page as well to make the banner disappear??

Edited by P_O
Link to comment
3 hours ago, P_O said:

Hi tuanphan, I have solved the issue! 

Can I quickly ask you, how to make the current banner image look more suitable on mobile? https://www.ortner-china.com/home

It looks fine on desktop, but the crop on mobile is too zoomed in

Add to Design > Custom CSS

/* Mobile banner */
@media screen and (max-width:640px) {
body#collection-5e0b9f039df9c819e0e5f32b {
.page-banner-wrapper.page-banner-has-image {
    height: 150px !important;
}
.page-banner-wrapper.page-banner-has-image img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.page-banner-wrapper.page-banner-has-image * {
    font-size: 40px;
}}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile banner */
@media screen and (max-width:640px) {
body#collection-5e0b9f039df9c819e0e5f32b {
.page-banner-wrapper.page-banner-has-image {
    height: 150px !important;
}
.page-banner-wrapper.page-banner-has-image img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.page-banner-wrapper.page-banner-has-image * {
    font-size: 40px;
}}}

 

thank you for your fast reply, i really do appreciate it.

would it be possible to make it larger than the size of the CSS you gave me? on mobile, it looks proportionally too narrow now. best to be of a decent size, just to adjust the banner image so it doesn't look too cropped

Link to comment
11 hours ago, P_O said:

thank you for your fast reply, i really do appreciate it.

would it be possible to make it larger than the size of the CSS you gave me? on mobile, it looks proportionally too narrow now. best to be of a decent size, just to adjust the banner image so it doesn't look too cropped

you can adjust number 150 & 40

Email me if you have need any help (free, of course.). Answer within 24 hours.

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