How to create css for not symetric navigation bar?

Question

I need to write css for such navbar (black background is grid, white and grey is navbar itself ):

So I can't figure out, how to create div container, that would have 550px from center to the left and 458px from center to the right, in order to add orange button in right corner. Another thing is that orange button to the right should take all the space to the end of screen

You can't use a grid for that because the design it's not fitting in the features of that grid. — Miguel Morera, Sep 22 '17 at 07:44
This is based on the fact that the viewport is 1100px wide. What should happen with the fixed containers (550px/458px) when it is not, being either wider or narrower? — Asons, Sep 22 '17 at 07:50
just dont use a grid for the header? or ask the designer to adjust the header to a grid based one. can't do both — OptimusCrime, Sep 22 '17 at 08:03
@LGSon designer didn't specified that, the only requirement is responsiveness. I think some general approach would be enough — Taras Yaremkiv, Sep 22 '17 at 12:12
@TarasYaremkiv Great, and I already posted one with 3 samples — Asons, Sep 22 '17 at 12:15

Asons · Accepted Answer · 2017-09-22T10:23:16.940

Based on what should happen when the screen get wider or narrower than the given 1100px, this answer might need some adjustment.

If you create 3 containers and then give the first 2 a flex-basis (width) and the last flex-grow (fill remaining space), you can accomplish that.

This sample will shrink the left/right when there is not enough space

.wrapper {
  display: flex;
}

.wrapper .left {
  flex-basis: 550px;
}

.wrapper .right {
  flex-basis: 458px;
  
  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex-grow: 1;
}


/* style for this demo */
.wrapper > div {
  padding: 5px;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

This sample will keep the left/right width when there is not enough space, cause a horizontal scrollbar to appear

.wrapper {
  display: flex;
}

.wrapper .left {
  flex-basis: 550px;
  flex-shrink: 0;             /*  disallow to shrink  */
}

.wrapper .right {
  flex-basis: 458px;
  flex-shrink: 0;             /*  disallow to shrink  */

  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex-grow: 1;
}


/* style for this demo */
.wrapper > div {
  padding: 5px;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

This sample will shrink/grow the left/right and keep the center mark you show in your image at center of its parent.

.wrapper {
  display: flex;
}

.wrapper .left {
  flex: 6 6 0;                  /*  6/12  */
  overflow: hidden;
}

.wrapper .right {
  flex: 5 5 0;                  /*  5/12  */
  overflow: hidden;
  
  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex: 1 1 0;                  /*  1/12  */
  overflow: hidden;
}


/* style for this demo */
.wrapper > div {
  padding: 15px 0;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

<div class="mark-center">
  &uarr;    
</div>

score 0 · Answer 2 · answered Sep 22 '17 at 08:30

Just try use flexbox, for example, you can split your wrapper on to thee div's like so:

<div class="wrapper">
    <div class="one">
      <a href="#" class="link">link1</a>
      <a href="#" class="link">link2</a>
      <a href="#" class="link">link3</a>
    </div>
    <div class="two">
      <a href="#" class="link">link4</a>
      <a href="#" class="link">link5</a>
      <a href="#" class="link">link6</a>
    </div>
    <div class="three">
     <!-- button here -->
    </div>
</div>

And a little styles

.wrapper { 
  display:flex; 
  width: auto;
  height: 50px;
  border: 1px solid;
  .one {
    display:flex;
    border-right: 1px solid;
    width: 550px;
    align-items: flex-end;
    justify-content: flex-start;
    }
    .two {
      display:flex;
      border-right: 1px solid;
      width: 458px;
      align-items: flex-end;
      justify-content: flex-end;
    }
    a {
        padding: 10px;
      }
     .three {
       text-align: center;       
     }
  }

Demo here:

https://jsfiddle.net/dw60wjq2/ Hope it will help you :)

Kamal K Gupta · Answer 3 · 2017-09-22T08:37:53.833

-2

/* Please try this example it will solve the issue for desktop version. */

HTML

.bg-class {
    background-color: #ccc;
    position: relative;
}
.bg-class:before {
    position: absolute;
    background-color: #000;
    height: 100%;
    width: 50%;
    content: "";
    z-index: 0;
}
.inner-html {
    position: relative;
    z-index: 1;
    color: #fff;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="bg-class">
            <div class="inner-html">Any thing you have just place here</div>
        </div>
    </body>
</html>

CSS

.bg-class {
    background-color: #ccc;
    position: relative;
}
.bg-class:before {
    position: absolute;
    background-color: #000;
    height: 100%;
    width: 50%;
    content: "";
    z-index: 0;
}
.inner-html {
    position: relative;
    z-index: 1;
    color: #fff;
}

edited Sep 22 '17 at 08:37

answered Sep 22 '17 at 07:57

Kamal K Gupta

1
1

2

This does not answer the question at all – OptimusCrime Sep 22 '17 at 08:02
It is for the exact entering the background colour If you want to fix it to 550px from the right just replace 50% to 550px to the width in .bg-class:before css – Kamal K Gupta Sep 22 '17 at 08:09
"how to create div container, that would have 550px from center to the left and 458px from center to the right, in order to add orange button in right corner. " the original question asks – OptimusCrime Sep 22 '17 at 08:11
Answer is edited now, And I hope this will solve the problem. – Kamal K Gupta Sep 22 '17 at 08:40
I don't recommend flex-box as it doesn't supports all browsers. – Kamal K Gupta Sep 22 '17 at 08:42
[CSS Flexible Box Layout Module](https://caniuse.com/#feat=flexbox) - Global support 84.52% + 12.11% = 96.63%. Isn't that enough – Taras Yaremkiv Sep 22 '17 at 11:57
Yeah, but still not 100% accurate answer. – Kamal K Gupta Sep 24 '17 at 16:00

How to create css for not symetric navigation bar?

3 Answers3

HTML

CSS