Move 2 "div"?

• 

  sup3rgiu · Member · Apr 22, 2014 at 12:46 pm

  • Copy link
  • Add topic to favorites

  Hello guys,
  I’m trying to move 2 “div”, but I don’t know how.

  I want move the Menu under the Header Image.

  Thanks all

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 22, 2014 at 6:21 pm

  • Copy link

  Dynamic News is a responsive width theme and it has no overall parent container for the menu/header image, and that makes repositioning the header and menu a bit involved since we have to use position: absolute, which breaks the relationship between the element we move and the rest of the elements in the web pages. To recreate that relationship, we have to do it manually using media queries.

  Add the following at the end of your existing custom CSS and see what you think when you narrow down your browser window, and view it on a tablet and/or smartphone.

  #wrapper {
      position: relative;
  }
  #wrap {
      margin-top: 190px;
  }
  #navi-wrap {
      position: absolute;
      top: 270px;
      width: 100%;
      z-index: 100;
  }
  
  @media screen and (max-width: 700px) {
      #navi-wrap {
          top: 220px;
      }
  }
  
  @media screen and (max-width: 650px) {
      #navi-wrap {
          top: 200px;
      }
  }
  
  @media screen and (max-width: 450px) {
      #navi-wrap {
          top: 170px;
      }
  }

• 

  sup3rgiu · Member · Apr 22, 2014 at 6:35 pm

  • Copy link

  Thanks! Now they are correct, but not for Tablet and Mobile, because the logo isn’t in the middle.

  Look it if you can

  Thanks

• 

  thesacredpath · Member · Apr 22, 2014 at 9:27 pm

  • Copy link

  For your header image, find this selector in your custom css: #custom-header img and remove the margin-left declaration and then add the following to center the image.

  #custom-header {
      text-align: center;
  }

• 

  sup3rgiu · Member · Apr 22, 2014 at 9:43 pm

  • Copy link

  Thanks! Now is really better.

  There is another probelm now:
  the space between the menu box and the slides is too much, but if I reduce it, when I go in Tablet or Mobile mode the menu is under the slides

• 

  thesacredpath · Member · Apr 22, 2014 at 11:55 pm

  • Copy link

  What tablet are you using and do you know the resolution?

  After looking again, I suggest adding one more @media rule. Add this above the other @media rules.

  @media screen and (max-width: 1000px) {
      #wrap {
          margin-top: 180px
      }
  }

  I’m seeing no overlap when I look at your site and the menu, when I click on the icon flows down over the top of the content.

• 

  thesacredpath · Member · Apr 22, 2014 at 11:59 pm

  • Copy link

  Add this at the bottom of the @media rules which adjusts things a little further for phones.

  @media screen and (max-width: 400px) {
      #navi-wrap {
          top: 120px;
      }
      #wrap {
          margin-top: 120px;
      }
  }

• 

  sup3rgiu · Member · Apr 23, 2014 at 1:21 pm

  • Copy link

  Thanks!

  Now is alla perfect!

  #resolved

• 

  thesacredpath · Member · Apr 23, 2014 at 8:56 pm

  • Copy link

  You are welcome.