-1

I have 4 blocks Header,Section,Main,Footer.

The layout of my site

I added a horizontal menu in the header and I set it above the section menu that has my slider. but the problem is I want to set the menu vertical when the page width is less than 1136 pixel, the menu covers my slider in section and i don't want that. what i want is the menu below the section so the user can see the menu and slider. i put my web site URL to understand well.

/*Header Tag*/
.cd-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0,1,1,0.4);
}
  /*section Tag*/
.cd-hero{
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  /*main Tag*/
.cd-main-content {
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
  padding: 2em 0;
}
Abbas Ekh
  • 15
  • 5
  • 1
    Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. – Quentin Aug 08 '17 at 09:16
  • all you do is just minimize a little bit you browser and tell me why my slider goes behind my menu. i think the answer is to simple and i confused to find it. so instead comment me like this please answer me if you can find the problem. thanks a lot. – Abbas Ekh Aug 08 '17 at 09:27
  • 1
    I refer you to my previous comment. – Quentin Aug 08 '17 at 09:30

1 Answers1

0

FASTER WAY by just using display:none

Add another menu below your section where the slider is, and only show it when it reaches the width 1136px.

Another way is using flex

With flex you can set the order of items; here's a guide to flexbox. for reference as well here

Example using flex:

<header>
    <div class="wrapper">
        <nav>...links...</nav>
        <div class="slider"></div>
    </div>
</header>
<section></section>

/** CSS **/
header .wrapper {
    display:flex;
    flex-direction:column;
}

@media only screen and (max-width:1136px){
    nav {
        order:2;
    }
    .slider {
        order:1;
    }
}
Softmaven
  • 90
  • 10