Mobile Header

Hi Janette,

This is the site you are referring to I assume? https://nbocellistaffing.com/main/

The mobile header is currently hiding behind the page header/logo image because you have this CSS added in the child theme:

.home .inside-content-header .hide-on-desktop, .home .inside-content-header .hide-on-mobile {
	position: absolute;
	top: 0;
	z-index: 999;
}

If change the position to relative the menu toggle should show up.

Well, now all the menus are placed at the top of the screen rather than the top of the content and the home page vertical spacing is just crazy... The header used to overlap the top of the slideshow with the menu sitting nicely below the slideshow and the content starting under the menu. I worked for hours to get that right and now this site is live and it looks terrible...

https://nbocellistaffing.com/main/

The site should look exactly the same regardless it's live or not since the code is exactly the same.

You could try something like this:
- Remove the page header logo you added for mobile (https://nbocellistaffing.com/main/wp-content/uploads/2017/02/2MOBILE-logo.png)
- Add it in Customizer > Site Identity
- Hide it in Desktop and tablet with this CSS:

@media (min-width: 769px) {
    .site-logo {
        display: none;
    }
}

- Disable Mobile Header in Customizer > Layout > Header

Not sure if this would work as there's a quite a bit of custom CSS in the child theme for that header area. If not then you may have to play with CSS and styling some more to get the look you want

Hope this helps.

I really don't know how the website went from having the menu on top of the content area to the top of the page but out of the blue it changed. I was not working on it when it happened so I know I didn't do anything to it. I had to deal with it being screwed up and not functional since it is live and receiving visitors so I adjusted the height on the header and slideshow. When I adjusted the height of the menu, everything moved down so that was no good. I just wish it had been stable and hadn't moved. I am concerned it will move again...

It was stable for an entire year until the software update...

Sorry I can't really tell you why it changed as I just see the current code, and the code I pointed out here: https://generatepress.com/forums/topic/mobile-header-4/#post-283507 would put the mobile header behind the logo. Using position: absolute; often causes problem in responsiveness.

GP updates wouldn't change your setting/child theme either otherwise we would definitely get a lot of complains.

If you want the logo above navigation in mobile, did you try the solution I provided here? https://generatepress.com/forums/topic/mobile-header-4/#post-283599

Do you have a screenshot/example of what it's supposed to look like? If so, I should be able to tell what's going on really easily.

https://nbocellistaffing.com/images/bocelli-site.jpg

I am reviewing the above posts now...

-Janette

so the problem wasn't just the mobile header? Looks like there has been quite a few changes comparing the current site to the screenshot.

Let us know.

The above screenshot is of the html website that the generatepress one was fashioned after. I can't do a screenshot of how that one looked because it changed! What needs to be noted is that this is how the header, slideshow, menu, and content all lined up. It's how it was this morning and most of the day! Then the menu shifted up to the top so I had to move the rest so at least the website could be used since the menus was covered by the header.

-Janette

Just so I'm clear before providing some code, are we basically just wanting your menu to display below your header?

It's displaying above because you'r using the Page Header add-on to add your header, which displays below the site header (where the navigation sits).

We can move the navigation below the page header with some code, but I want to make sure that's the only thing that needs to be done and that I'm not missing something.

Hi,

The menu was directly above the content. In some cases there is a slideshow or video between the header and the menu. The menu had been above directly above the content previously.

I have noticed that Chrome is caching everything and not letting go... I followed their instructions to clear it but it is very annoying. I have Firefox and Edge also installed. Which browser is best for making changes? I like Chrome for the developer tools but I have a terrible time with the cache.

THANK YOU!

-Janette

I designed this website a while back in html. This is the css for the header on the homepage which overlaps the slideshow:

position: absolute;
top: -102px;
left: -95px;
z-index: 500;
}
img[Attributes Style] {
width: 970px;
height: 176px;
}
Inherited from table
user agent stylesheet
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
Inherited from body
bocelli-slideshow.css:4
body {
font-family: Arial, Helvetica, sans-serif;
margin-top: 55px;
background-color: #66768a;
background-image: url(../images/tile_04.jpg);
background-repeat: repeat-x;
color: #333;
}

The html:

Oh, that did not copy well... That was an attempt to show you how it looks in Chrome using inspect from my local files...