JoHksi JoHksi - 5 months ago 7
AngularJS Question

Aligning image nav items into 2 lines in mobile size screen in Rails app

I have nav bar in my Rails web app. I'm trying to make it responsible in mobile screen but I cannot achieve what I want. Below is image what it normally looks like in desktop screen.

enter image description here

When I view this in iphone5 and iphone6 size, it looks like below. Logo image is on the left and nav items are on the right.
enter image description here

I want to make everything centered and stretch nav items equally using full width like below:
enter image description here

Below is the html code I have:

<header class="page-header--transparent">
<div>
<a href="/" class="page-header-logo">
<%= image_tag("logo-green.svg") %>
</a>
</div>
<nav class="page-header-nav">
<%= link_to 'Login', new_user_session_path, :class => "page-header--transparent-nav-item" %>
<%= link_to 'Get Started', new_user_registration_path, :class => "page-header--transparent-nav-item" %>
<%= link_to 'Contact', '/contact', :class => "page-header--transparent-nav-item" %>
</nav>
</header>


Below is CSS code:

.page-header--transparent {
background-color: transparent;
box-shadow: none;
padding: 12px 20px;
}

.page-header-nav {
float: right;
}

.page-header--transparent-nav-item {
display: inline-block;
border-bottom: 1px solid transparent;
text-decoration: none;
color: #757575;
padding: 8px 17px;
-webkit-font-smoothing: antialiased;
transition: all ease-in-out 1s;
}

.page-header-logo {
display: block;
float: left;
padding: 0 12px;
}

@media (max-width: 500px) {
.page-header--transparent-nav-item {
padding: 15px 10px;
}

.page-header--transparent {
background-color: #ffffff;
box-shadow: none;
padding: 12px 20px;
}
}


It would be great if anyone can give me advice!!

Answer

.c {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.logo {
  width: 100px;
  height: 100px;
  background: yellow;
  text-align: center;
}
.menu {
  display: flex;
  flex-direction: row;
  flex: 1;
  background: green;
}
.menu .m {
  flex: 1;
  text-align: center;
}
@media (max-width: 500px) {
  .c {
    display: block;
  }
  .logo {
    width: 100%;
  }
  .menu {
    width: 100%;
  }
}
<div class="c">
  <div class="logo">logo</div>
  <div class="menu">
    <div class="m">menu1</div>
    <div class="m">menu2</div>
    <div class="m">menu3</div>
  </div>
</div>

updated using flex

Comments