Remove Header on all sub-pages

Any ideas?

Ismael,
Please excuse and Support Protocol I violated. I was not aware.
As to the issue, the code did not appear to change the issue.
When a page loads and I am at the top of a sub-page, I still see the full height os the header space as you can see here:

As soon as I scroll down, the space goes away and it looks like I am hoping to have it look when a sub-page loads with tjust the nav bar in place like so:

Hope that helps clarify.
Thanks.

That did not work for a desktop.
However when I tried the following:
I removed this bit of code from above:
.page-id-734 #main {
padding-top: 200px !important;
}
On the Header Size I kept the custom size
On Header Behavior I have all the Sticky Header options unchecked but do have the Let logo and menu position adapt to browser window box checked.

It works perfect on a desktop and tablet but on a mobile, the mobile menu disappears on sub pages and the menu background is large.
Here is what the homepage and a sub-page look like on a desktop with the changes above.
Here is what I see:
HomePage – Desktop

SubPage – Desktop

HomePage – Mobile (Android)

SubPage – Mobile

I’ll leave this code in place for now till you can check as this is the closest to getting everything correct that has been achieved so far.
Thanks.

Ismael,
That code was a suggestion from Andy on this thread: https://kriesi.at/support/topic/add-multiple-widgets-to-header/
The full code is:
@media only screen and (max-width: 767px) {
.responsive #top #main {
top: 275px;
position: relative;
}
}

I believe the idea was to allow the two header text widgets a space to float under the logo on mobile screens.
If I remove the code, yes the space goes away but the mobile nav box is still not visible on the sub-pages.
I did try targeting the code above just to the homepage ID, but it did not solve the problem.
Thoughts?

Andy,
When I add that in, it does do what you see on the mobile, but then on the desktop it displays like this:

I have taken out the code for now, but below I have given you admin creds to go check yourself if you wish.
Just to refresh as this has been a long thread and is combining with some other customizations, here is what I am trying to do:
1. I am trying to have the header image/logo appear on the home page but none of the sub pages.
2. On the home screen I have the two widget boxes that display inline on full screens but then display in list when on mobile screen.
3. On all sub-pages, I do not need to see these widgets and also I do not want to see the logo or header background image.
4. On all sub-pages I do want just the nav bar strip to be sticky.

I currently have the following bits of Quick CSS that are involved in this as follows:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
margin-top:20px!important;
color:#ffffff!important;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 50px;
}

.container.av-logo-container, #text-5, #text-6 {
display: none;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0px;
}

.page-id-734 .container.av-logo-container, .page-id-734 #text-5 {
display: block;
}

#text-5 {
left: 65% !important;
}

.page-id-734 #text-6 {
display: block;
}

#text-6 {
left: 85% !important;
transform: translate(100%);
}

div#text-5 {
top: 83px !important;
left: 125px !important;
}

div#text-6 {
top: 207px !important;
left: 125px !important;
}

@media only screen and (max-width: 767px) {
header#header {
height: 400px;
}
}

@media only screen and (max-width: 767px) {
.responsive .logo img {
max-height: 60px;
}
}

Also, on the Header > Header Behavior I have the Stick Menu box checked (all other options unchecked)
Sorry if this is getting convoluted. I do appreciate all your help.

Andy,
Sorry, I am not trying to gang issues. I just want to make sure there is not conflict in the issues.
I have put the code you suggested back in and you can go see what it looks like on a desktop and mobile.

On mobile the Mobile menu is no not visible on sub-pages. There is just the large grey area.

Hi Vinay,
Thanks.
So I see where this works on the desktop/tablet view, but on a mobile, I still see the space and still cannot see the mobile menu.

Second, since I am only needing to see this extra space on the homepage, it seems my having to add this code for all the other pages and any new ones created, is going to be pretty cumbersome. There are currently 200+ pages/posts on the sites and because of thier podcast it is at least one new page a week.
Is there not a way to attack this from the other direction that says modify this only on page-id rather than add this on all pages then have to make an exception for all pages but the home page?

I am ok with it although that piece of CSS is going to be pretty big and I don;t know if that then creates some processing issues. I do though need to resolve the mobile view and nav bar visibility if possible.
Thanks again for your time and consideration.

So the following is what is creating the grey space on the mobile:
@media only screen and (max-width: 767px) {
#header_main {
margin-bottom: 265px;
}}
But even if I shrink it or remove it, I still do not see mobile menu

This code when removed allows me to see the mobile menu:
.container.av-logo-container, #text-5, #text-6 {
display: none;
}
But then the header widgets and logo image header are visible on all pages.

Does this help?

Andy,
I am not sure if I understand. Which code am I replacing. Both of the blocks:
@media only screen and (max-width: 767px) {
#header_main {
margin-bottom: 265px;
}}
and:
.container.av-logo-container, #text-5, #text-6 {
display: none;
}

Or just one of the.
It appears if I just delete
.container.av-logo-container, #text-5, #text-6 {
display: none;
}

and put in your two code blocks, I get the mobile menu on a smart device, but I also am still seeing the header image and logo on the sub-pages (which I am trying to hide) and the text 5 and 6 header widgets are still displaying on the sub-pages.

Could you clarify?
Thanks.

and put in the code you suggest, I get the mobile menu, but I still see the heaqder

Thanks Andy,
So we may be working cross purposes here since there are two things I am trying to do that are being addressed on two different support tickets.
This thread was originally about finding a way to hide the Header image, header widgets and logo on all pages but the Home page.
You helped me out on this as you can see at the top and we almost had that solved except for the gap issue on sub-pages and that the mobile nav menu disappeared.
It seems with this code:
@media only screen and (max-width: 767px) {
.container.av-logo-container {
display: block;
}
#header_main {
margin-bottom: 0;
}}

We are getting the menu back, but by forcing the header image, logo area to appear on all pages which is what I was trying to avoid.
I am afraid the various code bits are now working against each other.
So first question is, should I just consolidate all the issues into a new ticket on where we are at or if not then:
1. If I leave the previous code in place that you gave me to hide the header elements on all pages but the home page:
.container.av-logo-container, #text-10, #text-13 {
display: none;
}
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0px;
}
And for your homepage:

.page-id-734 #main {
padding-top: 200px !important;
}
.page-id-734 .container.av-logo-container, .page-id-734 #text-5 {
display: block;
}
.page-id-734 #text-6 {
display: block;
}

then is there a way to display the mobile menu (but not the logo container) which is hidden by this code on a mobile device?

Again I apologize if this is getting confusing. It is to me.
Thanks again.

My apologies. The site is live at url below.
Please note in migration, header text widgets changed from text-5 and text-6 to text-10 and text-13 respectively.

• This reply was modified 8 years, 5 months ago by themeforesttony.

Andy,
Ok let’s forget everything thus far.
I have adjusted code back to where everything is working as I was hoping except for one thing.
On all sub-pages in the site, I want to remove the header background image and the header text widgets so that the nav bar and a banner (in an image slider) appear at the top.
I have this working now on everything except a mobile device.
On a mobile device because I am hiding the av-logo container the mobile menu is not visible on the sub-pages; only the home page.
Is there a way for to get the mobile menu and the logo to appear as I am indiciting in the image below:

Let me know if you need more clarity.
Thanks again.

Yigit,
That’s close enough.
Thanks. Let’s close this thread.