Make Slider full width, above nav menu?

  • wilddoktor

    #1438

    How would I move the slider up to just below the header image and make it full width, and move the nav menu below it?

    I’m using a child theme, so I’m assuming I need to create a (or a couple?) blank .php files and add code to them…just not sure what to modify.

    Thanks!

    wilddoktor

    #15804

    Oh; I only want this setup on the home page…all other pages as-is…

    Admin

    Syahir Hakim

    #15805

    You can achieve this simply by modifying the positioning of the nav menu and the slider using CSS. I reckon using CSS absolute positioning will do it.

    wilddoktor

    #15806

    Thanks for your reply Syahir! I guess I need another hint…I’m not very good @ CSS or WP yet.

    (I thought maybe I needed move the slider div tag into the header, just above the nav div…but…I can’t find a slider div tag in any of the theme files, and I’m unsure where to look.)

    Help?

    Admin

    Syahir Hakim

    #15807
    Quote:
    (I thought maybe I needed move the slider div tag into the header, just above the nav div…but…I can’t find a slider div tag in any of the theme files, and I’m unsure where to look.)

    That would be the ideal way of implementing it, but it’ll involves creating a functions.php file in your child theme and adding a number of custom functions in there.

    The easier way (though not ideal) is to just use CSS positioning to move things around instead. Please provide the URL to your site so that we can take a look.

    wilddoktor

    #15808

    Well, I’ve gotten closer by using the “one column, no sidebar” template for the home page, and changing the slider display style to “background image and excerpt”. I’ve also messed around with the layout of the “excerpt” area in the slider.

    Have a look; it’s a work in progress: http://www.thatcomputergeek.com/v1

    But I’d still love to put it (the slider) above the nav bar so I could use the “two (or three) columns, sidebar on the left” layout(s) with the homepage, but keep the nice, full-width slider…but I understand if that’s outside the scope of your patience! 🙂

    Admin

    Syahir Hakim

    #15809

    Just to get you started:

    #container {
    position: relative;
    }
    #nav {
    position: absolute;
    width: 100%;
    top: 550px;
    }
    .featured_slider {
    margin-bottom: 47px;
    }

    wilddoktor

    #15810

    Yeah…that’s really close! The problem is, of course, that on all the other pages now the nav bar is right in the middle of the page. 🙂 Any hints on how to get this setup to only show on the home page?

    Admin

    Syahir Hakim

    #15811

    Use this instead:

    .home #nav {
    position: absolute;
    width: 100%;
    top: 550px;
    }

Viewing 9 posts - 1 through 9 (of 9 total)

  • You must be logged in to reply to this topic.