The Stack Overflow podcast is back! Listen to an interview with our new CEO.
    Tweeted twitter.com/StackCodeReview/status/1096741129993797633
3 edited tags
| link
2 added 10 characters in body
source | link
/*------------------------
Default grid
-------------------------*/
.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col {
  flex: 1;
}

/*------------------------
Columns
-------------------------*/
.has-2-columns .col {
  flex: none;
}

.has-2-columns .col {
  width: 49%;
}

/*------------------------
Logo
-------------------------*/
.site-title {
  position: relative; /* Enables z-index */
  z-index: 1; /* Positions logo above .main-navigation */
  width: 80px;
  margin: 0 auto;
  background: #ccc;
}

/*------------------------
Main navigation
-------------------------*/
.main-navigation {
  position: relative;
  margin-top: -24px; /* Brings nav inline with .site-branding */
  z-index: 0; /* Ensures nav is below logo.site-branding */
}

.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-navigation ul li {
  display: inline-block;
}

.left-menu {
  text-align: left;
}

.left-menu li {
  margin-right: 24px;
}

.right-menu {
  text-align: right;
}

.right-menu li {
  margin-left: 24px;
}
<header class="site-header">

  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Demo</a></h1>
  </div>

  <nav class="main-navigation flex has-2-columns">

    <div class="left-menu col">
      <ul id="left-menu" class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>

    <div class="right-menu col">
      <ul id="right-menu" class="menu">
        <li><a href="#">Contact</a></li>
        <li><a href="#">Store</a></li>
      </ul>
    </div>

  </nav>

</header>
/*------------------------
Default grid
-------------------------*/
.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col {
  flex: 1;
}

/*------------------------
Columns
-------------------------*/
.has-2-columns .col {
  flex: none;
}

.has-2-columns .col {
  width: 49%;
}

/*------------------------
Logo
-------------------------*/
.site-title {
  position: relative; /* Enables z-index */
  z-index: 1; /* Positions logo above .main-navigation */
  width: 80px;
  margin: 0 auto;
  background: #ccc;
}

/*------------------------
Main navigation
-------------------------*/
.main-navigation {
  position: relative;
  margin-top: -24px; /* Brings nav inline with .site-branding */
  z-index: 0; /* Ensures nav is below logo */
}

.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-navigation ul li {
  display: inline-block;
}

.left-menu {
  text-align: left;
}

.left-menu li {
  margin-right: 24px;
}

.right-menu {
  text-align: right;
}

.right-menu li {
  margin-left: 24px;
}
<header class="site-header">

  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Demo</a></h1>
  </div>

  <nav class="main-navigation flex has-2-columns">

    <div class="left-menu col">
      <ul id="left-menu" class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>

    <div class="right-menu col">
      <ul id="right-menu" class="menu">
        <li><a href="#">Contact</a></li>
        <li><a href="#">Store</a></li>
      </ul>
    </div>

  </nav>

</header>
/*------------------------
Default grid
-------------------------*/
.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col {
  flex: 1;
}

/*------------------------
Columns
-------------------------*/
.has-2-columns .col {
  flex: none;
}

.has-2-columns .col {
  width: 49%;
}

/*------------------------
Logo
-------------------------*/
.site-title {
  position: relative; /* Enables z-index */
  z-index: 1; /* Positions logo above .main-navigation */
  width: 80px;
  margin: 0 auto;
  background: #ccc;
}

/*------------------------
Main navigation
-------------------------*/
.main-navigation {
  position: relative;
  margin-top: -24px; /* Brings nav inline with .site-branding */
  z-index: 0; /* Ensures nav is below .site-branding */
}

.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-navigation ul li {
  display: inline-block;
}

.left-menu {
  text-align: left;
}

.left-menu li {
  margin-right: 24px;
}

.right-menu {
  text-align: right;
}

.right-menu li {
  margin-left: 24px;
}
<header class="site-header">

  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Demo</a></h1>
  </div>

  <nav class="main-navigation flex has-2-columns">

    <div class="left-menu col">
      <ul id="left-menu" class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>

    <div class="right-menu col">
      <ul id="right-menu" class="menu">
        <li><a href="#">Contact</a></li>
        <li><a href="#">Store</a></li>
      </ul>
    </div>

  </nav>

</header>
1
source | link

Position logo in middle of nav

I've recently migrated away from floats and have started using flexbox to build my grids.

My navigation has 4 menu items. I'd like my logo to sit in the middle of these. To maintain a good page structure for SEO, I don't like the idea of putting my logo within a list item inside the nav.

Instead, I've built a solution that uses flexbox and a negative margin.

/*------------------------
Default grid
-------------------------*/
.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col {
  flex: 1;
}

/*------------------------
Columns
-------------------------*/
.has-2-columns .col {
  flex: none;
}

.has-2-columns .col {
  width: 49%;
}

/*------------------------
Logo
-------------------------*/
.site-title {
  position: relative; /* Enables z-index */
  z-index: 1; /* Positions logo above .main-navigation */
  width: 80px;
  margin: 0 auto;
  background: #ccc;
}

/*------------------------
Main navigation
-------------------------*/
.main-navigation {
  position: relative;
  margin-top: -24px; /* Brings nav inline with .site-branding */
  z-index: 0; /* Ensures nav is below logo */
}

.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-navigation ul li {
  display: inline-block;
}

.left-menu {
  text-align: left;
}

.left-menu li {
  margin-right: 24px;
}

.right-menu {
  text-align: right;
}

.right-menu li {
  margin-left: 24px;
}
<header class="site-header">

  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Demo</a></h1>
  </div>

  <nav class="main-navigation flex has-2-columns">

    <div class="left-menu col">
      <ul id="left-menu" class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>

    <div class="right-menu col">
      <ul id="right-menu" class="menu">
        <li><a href="#">Contact</a></li>
        <li><a href="#">Store</a></li>
      </ul>
    </div>

  </nav>

</header>

Is there a better way? Would this solution cause issues across different devices when it comes to clicking / tapping the menu items or logo to go back home?