Prevent div-overlapping only on window resize (w/ Styled Components)

user_13394915 0
Viewed 845

I have a header-component that has a title to the left and some links to the right of the page. The size and position of these divs are (partially) responsive and I am happy with the way they move along when I resize my window. However, I would like the left div to act as a wall for the others. As in when I resize my window to really small the links will 'hit' the title and only then start wrapping into multiple lines. How can I do this?


<html>
   <head>
     <style>
       .body {  
          position: fixed;
          top: 0;
          background-color: lightgoldenrodyellow;
          box-sizing: border-box;
          width: 100vw;
          height: calc(2% + 75px);
          z-index: 10000;
        }

        .titleContainer {
          position: fixed;
          left: 0;
          display: flex;
          align-items: center;
          font-size: calc(18px + 0.5vw);
          width: 250px;
          min-width: 200px; 
          height: calc(2% + 75px);
          transition: 0.3s;
          margin-left: 10px;
        }
        .titleContainer:hover{
          cursor: pointer;
        }

        #title {
          margin-right: auto;
          padding-left: 5px;
          text-decoration: none;
          font-size: 32px;
          font-weight: 750;
          font-family: Arial, Helvetica, sans-serif;
        }

        .pageLinkContainer {
          position: fixed;
          right: 0;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: calc(2% + 75px);
          width: auto;
        }

        .pageLink {
          margin-right: 10px;
          margin-left: 2px;
          font-size: calc(12px + 0.3vw);
        }
      </style>
   </head>
   <body>
      <div className="titleContainer">
        <h3><Link id="title" to="/" >TITLE</Link></h3>
      </div>

      <div className="pageLinkContainer">
        <Link className="pageLink" to="/upload">Upload a funny Gif</Link> &nbsp;
        <Link className="pageLink" to="/gifs"> Look at funny Gifs</Link> &nbsp;
        <Link className="pageLink" to="/database">Database</Link> &nbsp;
      </div>
    </body>
</html>

EDIT #3:

As per Niwo's answer below, here's my current css. I use Styled Components that create a body as a wrapper around the component. I've tried to explain the flow of the page as clearly as possible. Another idea I had was to use the window.innerWidth to make the links disappear if the window is resized.

I've updated this CSS to the working answer, for anyone who cares to know. I've also added back in my styled Components (which I removed in order to remove the React from this). All credits go to Niwo of course.

CSS

//GLOBAL STYLE 

const GlobalStyle = createGlobalStyle`

body {
    margin: 0;
    padding: 0;
    background-color: rgba(0,0,50,0.3);
    height: 100%;
    width: 100%;
    position: absolute;
}
`


//GLOBAL CONTAINER
//A WRAPPER-DIV AROUND ALL COMPONENTS

const GlobalContainer = styled.div`
{
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
`


//HEADER COMPONENT
//ANOTHER WRAPPER-DIV JUST FOR THIS COMPONENT

const HeaderStyle = styled.div`
{
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  background-color: rgba(100,200,100,0.6);
  width: 100vw;
  height: calc(2% + 75px);
  z-index: 10000;
}


.titleContainer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    font-size: calc(18px + 0.5vw);
    width: 250px;
    transition: 0.3s;
    margin-left: 10px;
  }
.titleContainer:hover{
    cursor: pointer;
  }

#title {
    text-decoration: none;
    font-size: 32px;
    font-weight: 750;
    font-family: Arial, Helvetica, sans-serif;
  }

.pageLinkContainer {
    right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: calc(2% + 75px);
  }

.pageLink {
    white-space: nowrap;
    margin: 0 0.5rem;
    font-size: calc(12px + 0.3vw);
  }
`

HTML

<GlobalStyle />
   <GlobalContainer>
        <HeaderStyle>
            <div className="titleContainer">
                <h3><Link id="title" to="/" >Movie Scores</Link></h3>
            </div>

            <div className="pageLinkContainer">
                <Link className="pageLink" to="/upload">Upload a funny Gif</Link>&nbsp;
                <Link className="pageLink" to="/gifs"> Look at funny Gifs</Link>&nbsp;
                <Link className="pageLink" to="/database">Movies We've Seen</Link>&nbsp;
            </div>
        </HeaderStyle>
   </GlobalContainer>
styled-components reactjs css html javascript
1 Answers

Use flexbox to prevent other elements from overlapping

If you want the solution on fiddle, it's right here: https://jsfiddle.net/Niwo04/o1df63L2/1/

I've cleaned your code a bit up and replaced your React stuff with normal HTML (because I don't know something about React). I also did some coloring, because I thought that might make everything visually better to understand.

If you have any questions about my changes, feel free to reply on this answer ; )

body {
  margin: 0;
  background-color: darkgray;
}

.body {
  position: fixed;
  display: flex;
  justify-content: space-between;
  background-color: lightgoldenrodyellow;
  width: 100vw;
  height: 75px;
  z-index: 10000;
}

.titleContainer {
  display: flex;
  align-items: center;
  width: 250px;
  background-color: red;
  flex-shrink: 0;
}

.pageLinkContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: blue;
}

.pageLink {
  white-space: nowrap;
  margin: 0 0.5rem;
}
<html>

<body>
  <div class="body">
    <div class="titleContainer">
      <h3>TITLE</h3>
    </div>

    <div class="pageLinkContainer">
      <a class="pageLink">Upload a funny Gif</a>
      <a class="pageLink">Look at funny Gifs</a>
      <a class="pageLink">Database</a>
    </div>
  </div>
</body>

</html>

user_148623820
Related