Menu position

[plumcreek]

Okay, so here’s the next one. You helped me get the menu to sit over the slideshow on the home page with this CSS, and now I need to do it on all the pages. http://www.bethtest.com is the site.

/* moving menu on slider on home page */
.home.is-desktop #header {position:absolute;}
.home.is-desktop .menu-primary .wvrx-menu-container {background:transparent;padding-top:50px;}
.home.is-desktop .menu-primary .wvrx-menu > li > a {background:transparent;color:white;font-size:130%;}

I thought I should be able to put a header in, shut it off on the home page in lieu of the slider, remove the “home” part of the above and it would do what I wanted with the menu. I was wrong, obviously. So I’ve removed my messing with the code and came here for more help.

TIA.

[scrambler]

Well, your other pages do not have the same structure, instead of a slider in the content area, they have a header image above the menu, so no not that simple 🙂

Adding the rules below to the theme Global Custom CSS Rule box should do what you want

.is-desktop .menu-primary {position:absolute;top:100px;}
.home.is-desktop .menu-primary {position:absolute;top:0px;}

If you also need the menu to be white with no background, then you can change these settings in the theme menu options
You can then get edit out the background and color properties in the two previous rules that were doing that on the home page

All that would then be needed are

/* moving menu on slider on home page and on header image in others */
.is-desktop .menu-primary {position:absolute;top:100px;}
.home.is-desktop #header {position:absolute;}
.home.is-desktop .menu-primary .wvrx-menu-container {padding-top:50px;}
.home.is-desktop .menu-primary .wvrx-menu > li > a {font-size:130%;}
.home.is-desktop .menu-primary {position:absolute;top:0px;}

[plumcreek]

Okay, so now I need to move the page title into the header image on all the pages other than the home page. I tried this and it moved it, looks like it won’t take a negative so how do I move it up into the header? Why do I feel like this one is something really dumb I’m missing?

/* move page title into header */
.page-title{padding-top:10px;}

About Us

TIA!

[scrambler]

You cannot do negative padding, only negative margin, but then we have to deal with the z-index and overflow of the container

The easiest would be to do it on the content container.

The rules below should do it

#content {margin-top:-60px;}
#container {z-index:20000;overflow:visible;}
.home #content {margin-top:0px;}
.home #container {overflow:hidden;}

But check all your pages, as there may be some unintended consequences

[plumcreek]

Yeah that moved everything up so that’s a problem. Ugh. I thought then adding a number to the margin-top for the home content would move that back down but it doesn’t appear to be doing that.

Don’t suppose there’s a shortcode solution where I can just place the page title myself rather than doing it this way? Crap, I realize I don’t know what I’m talking about and I take great comfort in that you still understand.

[scrambler]

Change it to the ones below then

.page-header {margin-top:-120px;margin-bottom:120px}
#container {z-index:20000;overflow:visible;}
.home .page-header {margin-top:0px;margin-bottom:0px}
.home #container {overflow:hidden;}

[plumcreek]

That worked sort of, and wiped out the menu on the home page. If I remove the second chunk the home menu comes back. If I remove the first chunk it breaks the menu for the other pages. Would this be better if I did custom at the page level for the home page and global for everywhere else?

/* moving menu into header on home page*/
.is-desktop .menu-primary {position:absolute;top:10px;}
.home.is-desktop .menu-primary {position:absolute;top:0px;}
.wvrx-menu-container {background:transparent;padding-top:10px;}
.menu-primary .wvrx-menu > li > a {background:transparent;color:white;font-size:130%;}

/* move page title into header */
.page-header {margin-top:-120px;margin-bottom:120px}
#container {z-index:20000;overflow:visible;}
.home .page-header {margin-top:0px;margin-bottom:0px}
.home #container {overflow:hidden;}

[scrambler]

My bad, I forgot to cancel the z-index on home page

.page-header {margin-top:-120px;margin-bottom:120px}
#container {z-index:20000;overflow:visible;}
.home .page-header {margin-top:0px;margin-bottom:0px}
.home #container {overflow:hidden;z-index:1000;}

[plumcreek]

I’m such a pest…How to get the title for Posts up into the header?

Live site: https://milkmanmilk.com/durand-wi-helps-nationwide-fulfillment-of-milkman-milk/

Staging: http://bethtest.com/news/durand-wi-helps-nationwide-fulfillment-of-milkman-milk/

[scrambler]

We need to add a rule to make the overflow visible on post pages

.single article {overflow:visible !important;}

 

[plumcreek]

Hmmmm, that appeared to do nothing.

I have rarely, if ever, stepped into modifying posts at all as most of my clients are boring plain vanilla sites.

[scrambler]

We need a stronger selector on the container for these pages.

Change the last rule to

.single article, .single #container {overflow:visible !important;}

Next you need to decide what to do with meta info line, hide it or move it down below the header

[plumcreek]

Thanks again. And I just hid the dates via the customizer. Customer is supposed to be going through all of these stupid articles and decide which to keep and which to toss. It’s obvious to me that no one paid any attention to the comments last year when they did $4M in new online biz selling to the prepper community, mostly.

And on it goes. Thank you SO MUCH.

Beth

[scrambler]

Actually not quire.

From checking your site, the rules we needed for post are also needed on other pages.

SO Lets review them all, and try these instead of the previous ones (no longer need a .single rule).

.page-header {margin-top:-120px;margin-bottom:120px}
#container , article {z-index:20000;overflow:visible !important;}
.home .page-header {margin-top:0px;margin-bottom:0px}
.home #container, .home article {overflow:hidden !important;z-index:1000;}

[plumcreek]

Fabulous, thanks. And I suppose it’s centering over the left section because of the sidebar. How does one slide it to the right a bit?

I’ll do the fine tuning of the alignment stuff once I get the code in place and understand it. LOL.

[scrambler]

You see, this is why not precisely defining what you are after from the start is a large waste of time 🙂

Although you could add some padding to the page-header, this is never going to be quite right on the various page structures…

A better solution then would probably to insert a PHP shortcode in a post header insertion area to show the page title then move it up with CSS, and hide the theme page title using the page post options.

I will give it a look when I have a minute

 

 

[Author]

Posts