Home Forums Weaver Xtreme Theme Menu position

Viewing 16 posts - 1 through 16 (of 20 total)
  • Author
    Posts
  • #68948
    plumcreek
    Participant

    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.

    #68949
    scrambler
    Moderator

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

    #68965
    plumcreek
    Participant

    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!

    #68966
    scrambler
    Moderator

    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

    #68967
    plumcreek
    Participant

    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.

    #68968
    scrambler
    Moderator

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

    #68969
    plumcreek
    Participant

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

    #68972
    scrambler
    Moderator

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

    #68979
    plumcreek
    Participant
    #68980
    scrambler
    Moderator

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

    .single article {overflow:visible !important;}

     

    #68981
    plumcreek
    Participant

    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.

    #68982
    scrambler
    Moderator

    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

    #68983
    plumcreek
    Participant

    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

    #68984
    scrambler
    Moderator

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

    #68985
    plumcreek
    Participant

    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.

    #68986
    scrambler
    Moderator

    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

     

     

Viewing 16 posts - 1 through 16 (of 20 total)
  • You must be logged in to reply to this topic.