Make Slider full width, above nav menu?
-
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!
Oh; I only want this setup on the home page…all other pages as-is…
AdminYou 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.
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?
AdminQuote:(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.
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! 🙂
AdminJust to get you started:
#container {
position: relative;
}
#nav {
position: absolute;
width: 100%;
top: 550px;
}
.featured_slider {
margin-bottom: 47px;
}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?
AdminUse 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.