Home › Forums › Weaver Xtreme Theme › Menu position
- This topic has 19 replies, 2 voices, and was last updated 1 year, 1 month ago by
plumcreek.
-
AuthorPosts
-
June 10, 2021 at 18:44 UTC - Views: 54 #68948
plumcreek
ParticipantOkay, 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.
June 10, 2021 at 19:20 UTC - Views: 63 #68949scrambler
ModeratorWell, 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 pageAll 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;}June 14, 2021 at 19:45 UTC - Views: 47 #68965plumcreek
ParticipantOkay, 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;}TIA!
June 14, 2021 at 20:07 UTC - Views: 42 #68966scrambler
ModeratorYou 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
June 14, 2021 at 20:13 UTC - Views: 42 #68967plumcreek
ParticipantYeah 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.
June 14, 2021 at 21:02 UTC - Views: 37 #68968scrambler
ModeratorChange 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;}June 14, 2021 at 22:06 UTC - Views: 38 #68969plumcreek
ParticipantThat 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;}June 15, 2021 at 01:06 UTC - Views: 31 #68972scrambler
ModeratorMy 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;}June 15, 2021 at 16:41 UTC - Views: 31 #68979plumcreek
ParticipantI’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/
June 15, 2021 at 16:56 UTC - Views: 26 #68980scrambler
ModeratorWe need to add a rule to make the overflow visible on post pages
.single article {overflow:visible !important;}
June 15, 2021 at 17:03 UTC - Views: 23 #68981plumcreek
ParticipantHmmmm, 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.
June 15, 2021 at 18:08 UTC - Views: 21 #68982scrambler
ModeratorWe 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
June 15, 2021 at 18:26 UTC - Views: 21 #68983plumcreek
ParticipantThanks 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
June 15, 2021 at 18:37 UTC - Views: 17 #68984scrambler
ModeratorActually 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;}June 15, 2021 at 19:02 UTC - Views: 13 #68985plumcreek
ParticipantFabulous, 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.
June 15, 2021 at 19:40 UTC - Views: 17 #68986scrambler
ModeratorYou 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
-
AuthorPosts
- You must be logged in to reply to this topic.