Removing header on a couple of pages

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! 

Hi. You mean Header or Page Banner Header??

52 minutes ago, tuanphan said:

Hi. You mean Header or Page Banner Header??

header, on pages such as https://www.ortner-china.com/about , profile and contact.

thanks

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>
  

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>
  

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

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>
  

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

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. 

Mobile looks fine here. Try reload the page

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

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

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)

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

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?

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

Hi,

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

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

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

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?

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

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

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

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

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

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