Support » Themes and Templates » 100% wide slider below menu (with sidebar)

  • Hello,

    First post and everything, wow. Well, I have a question to all of you brilliant people: how do I add a slider below my menu?

    How can I add a slider of 100% width in between the header and the main content, when I also have a sidebar, such that the slider comes above the sidebar and content?

    I want to add a slider of 100% width, that appears right above the main content area and sidebar. I’m thinking this would be part of the header then (unless, of course, I add another div in between), but I’m not quite sure how I would do this, any ideas?

    To clarify my layout, I want:
    1. A header image at the very top
    2. The navigation right beneath that
    3. A full-width slider beneath that
    4. The standard layout with a sidebar and main content area.

    The theme I am modifying is TwentyTwelve. I consider myself to be very good at CSS and HTML, fairly good at JS, and completely fine with PHP. However, I am a complete beginner as far as WordPress goes, and so I would appreciate it if you would take an extra minute to explain to me what I would need to add to, for example, enable for a slider, and how I would add it through the CMS would also be appreciated.

    So far, the only things I’ve been able to think of is either changing the header-file to add for another image (possibly by adding a div after the nav), or adding a div right after the header (in the main template) with 100% width that would accept a slider or image. However, I am not quite sure of how I would do any of this, so all help is appreciated, even if you don’t have an exact solution to my problem!

    Kind Regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The theme I am modifying is TwentyTwelve

    Make VERY sure you are using a child theme to make changes to the theme – otherwise all your changes will be lost when WP is updated.

    If you want the slider on all pages, it would go in the header.php file – in a modified COPY of that file in the child theme. Generally, you would use a plugin for the slider code – which would go in the header.php file.

    Same with the other changes – they’d involved moving the HTML elements of the header.php file. This thread explains moving the navigation below the header image:

    No, sorry for not mentioning that; the slideshow should only be on the static front page, so would it then be better to make a first-page template by editing the existing default template? But I still do not know how I would use the slider here, unless you were to make the top div of the first page display content from another hidden page, in which case I suppose I could just place the slider there.

    Yes, in that case, you can make a custom template in the child theme – and add the slider code to the template:

    Thanks a lot!

    Got it to display the way I want, but I can’t seem to get the slideshow itself, and no js errors are popping up. Might be that I’m just tired, but I can’t find anything myself, would you mind looking through it?

    The slideshow lies at, currently being the image right below the nav.

    Really appreciate all the help so far, thanks a lot!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘100% wide slider below menu (with sidebar)’ is closed to new replies.