Header Slideshow & Nav not resizing to fit screen sizes Twenty Eleven (8 posts)

  1. PateSandwich
    Posted 4 years ago #

    New to WordPress - Go Easy on me Please!
    I am having problems using the Header-slideshow plugin with the Twenty Eleven Theme - I have it all lined up and running as I want and appears fine on my laptop screen, but on other Screen Sizes/Resolutions it is all over the place and not resizing. The site is http://www.randombook.co.uk .

    It seems the Header Slideshow is floating just above the header position rather than being in that position - what is the code I need to add and to which file? I gather I should amend the header.php file? I am using a Child Theme (and I have amended the height of the Header on twenty eleven to 1000X150) . But why is the Navigation bar also a different size on different screens/resolutions? It becomes two rows of menu items which I don't want! I simply want it all to stay as it appears on the screen I am working on! LOL
    The aim of all this is to have ten images randomly rotating as the header on every page of the site - I don't want the in-built twenty eleven 1 image random each time you refresh. Is there an easier plugin to configure? CIMY?

    I have searched high and low for the answers to the header slideshow just 'floating' and written to the developer to no avail. I am probably missing something very simple (like having it under a DIV tag or something) but I don't have the knowledge or skills to know what to put where. I am probably talking about two probs here, but I am now too confused.
    I am building this site free for a local Charity and they need it by the new School term so would be grateful of any help as I am pulling my hair out!

    (I am using WordPress 3.4.1, Latest Firefox and working on a laptop with a small 15.4 screen!)

    Please Please help me World!

  2. Andrew Nevins
    Forum moderator
    Posted 4 years ago #

    As you have a slider in your header, this has a set width of 1000px and therefore will not resize relative to browser sizes.

    You need to change this value to a percentage, of perhaps 100%.

  3. PateSandwich
    Posted 4 years ago #

    Thanks for your quick answer:

    Where do I change this value? Can I just do it in the slider settings height/width fields? Or do I need to change it in the coding in the files?

  4. Andrew Nevins
    Forum moderator
    Posted 4 years ago #

    How did you create the slideshow or was it included within the theme you're using?

  5. PateSandwich
    Posted 4 years ago #

    It is the plugin called "header-slideshow" which I added.

    I seem to have configured it okay, modified the .xml file to the URLS of my images, but I just now want it to resize with the rest of the site. Also why is the nav bar similarly resizing weirdly?

  6. Andrew Nevins
    Forum moderator
    Posted 4 years ago #

    On line 676 of style.css, this is causing the navigation to resize "weirdly";

    #branding .only-search + #access div {
     padding-right: 205px;

    Remember if you want to change this CSS, ensure you do-so through a Child Theme or Custom Style/CSS plugin.

  7. PateSandwich
    Posted 4 years ago #

    Okay so what should I change that code to in my child theme?

    (sorry but I have little knowledge of CSS)

    and the other issue of the slider - where do I change the values to 100% instead of 1000 pixels?

    Really appreciate your help and quick responses


  8. PateSandwich
    Posted 4 years ago #

    Anybody able to help further?

    I get that I need to change the code above in my child theme, but what to?

    And how do I get my slider in my header to be 100% and not 1000 pixels? I tried inputing it into the fields under header-slideshow settings, but it reverts to a completely different size. Which file do I need to amend?

    Really appreciate any guidance


Topic Closed

This topic has been closed to new replies.

About this Topic