Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kenny Parewijck
Kenny Parewijck
4,602 Points

Responsive structural design problem. Getting a page element out of an html element into another.

Hello!

Responsive design works for me but I encountered this problem different times now:

Check out this html code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

<div class="main_header_container">
    <div class="logo">
      <h1>Bigtitle</h1>
      <h3>smalltitle</h3>
    </div>
    <ul class="main_navigation">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
</div>

<div class="about_me_container">
    <img class="Profile_pic" src="" alt="" />
    <h2>Title</h2>
    <p>
      About me text. About me text. About me text. About me text. About me text. About me text.
    </p>
</div>

  </body>
</html>

What I want to do:

Get the navigation out of the .main_header_container and into the about_me_container. I want to do this to create my responsive design.

Problem:

I can't figure out how to get an element out of a parent into another.. except for cloning this element and displaying it to none until I want it to be visible and do the same with the original element.

But I don't like this solution..

Anyone?

1 Answer

Tomasz Chiossi
Tomasz Chiossi
7,545 Points
Tomasz Chiossi
Tomasz Chiossi
7,545 Points

I'm not sure I have understood well. If you did mean you want to remove navigation from main_header_content and add to another container why you don't create a new container for navigation itself, out of those containers what you did?

To remove elements from DOM whenever you need you can use jQuery or JavaScript, or hide elements what you don't want currently show.