• Hello,

    I am using the theme twentyfourteen.
    As soon as the screen width gets under a certain size the navigation on the left side jumps below the whole content of the side.
    Is there anyone who knows the line in the style.css which causes that?

    Thanks for helping!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Twenty Fourteen looks at it from a different angle. It is written so that every time the screen (or browser) width is over 1007 pixels, the black area (#secondary) will jump to sit in the left side on the screen. (Meaning the black area sits at the bottom of the page by default.)
    It is caused by the CSS code sitting in style.css from line 3689 on: You’ll find a bit that says

    @media screen and (min-width: 1008px) {

    This means that the following code shall be called into action in browser windows that are wider than 1007 pixels.

    Thread Starter Janini221

    (@janini221)

    Oh thank you! That is really good to know.

    Can you please tell me where is this part where they set this by default?

    The whole HTML output of Twenty Fourteen is leading up to it. It appears at the bottom of the page, because it is included into the page after the main content.

    Note that if you move it to the left side of the screen for small screen resolutions, the black area is likely going to cover the full screen, and a horizontal scroll bar will appear.

    Thread Starter Janini221

    (@janini221)

    Yeh but unfortunately this part is my main navigation of the site.
    So I want this part to stay there in every case so the user can find the main navigation.

    I know it wasn’t the best choice in the end but it is too late to change it all I am afraid :/

    Oh alright. So the bad news is: This really won’t make things easy. The good news is: I can think of two options:

    #1: Make a child theme and change the order of sections being included into all the pages. The whole #secondary section needs to be above the main content in the PHP partials. Next, you will have to adjust the CSS for #secondary, overriding Twenty Fourteen declarations from line 3689 on in your child theme’s style.css.

    #2: Learn to understand CSS flexbox, define your HTML sections as flex items and change their order. Alternatively, find a friend who will do this for you, because this goes way beyond WordPress forum help.

    Thread Starter Janini221

    (@janini221)

    Oh dear, I haven’t expected that to be such a big problem.

    I would like to try it with your first way cos I have already made a child theme. Could you please give me a hint how to change the order of the sections? What php-documents do I have to adjust? Sorry for asking tons of stupid questions and really thanks for your help!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Theme: twentyfourteen] Navigation jumps below content’ is closed to new replies.