How can I make my mobile navbar responsive and use media queries?

liamdocherty · July 21, 2019, 4:17pm

Hi,

1) On mobile my top navigation bar looks like this. As you can see depending on the logo size the navigation bar logo which is the three horizontal lines automatically adjusts. I just want it to be in the middle right hand size. For example like this no matter what the navbrand logo size is. How can I do this?

2) When the top navigation bar goes to mobile view again as you can see here. How can I make the phone number and email text be in the centre in a more responsive way? From doing research I was looking at something called media queries. Does anyone have any good links for this?

Here is my site code if you require additional coding to look at https://github.com/liamdocherty/courier.

`

/**
 * Header
 */
.header {
  position: relative;
  z-index: 5;
}

.header-toparea {
  background: #333333;
  color: #ffffff;
  padding: 10px 0;
}

.header-topinfo ul {
  padding-left: 0;
  margin-bottom: 0;
}

.header-topinfo ul li {
  list-style: none;
  display: inline-block;
  font-size: 14px;
  margin: 0 17px;
  padding: 2px 0;
}

.header-topinfo ul li:first-child {
  margin-left: 0;
}

.header-topinfo ul li:last-child {
  margin-right: 0;
}

.header-topinfo ul li i {
  margin-right: 10px;
  font-size: 18px;
}

.header-topinfo ul li a {
  color: #ffffff;
}

.header-topinfo ul li a:hover {
  color: #3423A6;
}

.header-topsocial {
  text-align: right;
}

.header-topsocial ul {
  padding-left: 0;
  margin-bottom: 0;
}

.header-topsocial ul li {
  list-style: none;
  display: inline-block;
  margin: 0 6px;
  padding: 2px 0;
}

.header-topsocial ul li:first-child {
  margin-left: 0;
}

.header-topsocial ul li:last-child {
  margin-right: 0;
}

.header-topsocial ul li a {
  color: #ffffff;
  font-size: 15px;
}

.header-topsocial ul li a:hover {
  color: #3423A6;
}

.header-bottomarea {
  background: #ffffff;
  -webkit-box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
  z-index: 3;
  position: relative;
}

.header-bottominner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
}

.header-bottominner .tm-navigation {
  text-align: right;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.header-logo a {
  display: inline-block;
}

.header-icons {
  padding-left: 15px;
}

.header-icons ul {
  padding-left: 0;
  margin-bottom: 0;
}

.header-icons ul li {
  list-style: none;
  display: inline-block;
  margin: 0 7px;
}

.header-icons ul li:first-child {
  margin-left: 0;
}

.header-icons ul li:last-child {
  margin-right: 0;
}

.header-icons ul li a {
  color: #444444;
  font-size: 21px;
}

.header-icons ul li a:hover {
  color: #3423A6;
}

.header-searchbox {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: -1;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -o-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.header-searchbox .search-close {
  padding: 0;
  color: #333333;
  font-size: 20px;
  border: none;
  cursor: pointer;
}

.header-searchbox .search-close i {
  line-height: 50px;
  vertical-align: middle;
}

.header-searchbox .search-close:hover {
  color: #3423A6;
}

.header-searchbox.is-visible {
  z-index: 1;
}

.header-searchinner {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  margin-top: -25px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.4s ease-in-out 0s;
  -o-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header-searchform {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.header-searchform input {
  height: 45px;
  border: none;
  padding: 0;
  font-size: 16px;
}

.header-searchbox.is-visible .header-searchinner {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-logo {
    padding: 15px 0;
  }
  .header-icons {
    padding-right: 45px;
  }
  .header-searchbox.is-visible {
    z-index: 3;
  }
}

@media only screen and (max-width: 767px) {
  .header-topinfo ul li {
    margin: 0;
    margin-right: 12px;
  }
  .header-logo {
    padding: 15px 0;
  }
  .header-icons {
    padding-right: 45px;
  }
  .header-searchbox.is-visible {
    z-index: 3;
  }
}

@media only screen and (max-width: 575px) {
  .header-topsocial {
    text-align: left;
  }
}

@media only screen and (max-width: 480px) {
  .header-logo {
    max-width: 130px;
    padding: 22px 0;
  }
}

.header-mobilemenu .mean-container .mean-nav {
  margin-top: 0;
}

.header-mobilemenu .mean-container .mean-bar {
  min-height: 0;
  padding: 0;
  z-index: 2;
}

.header-mobilemenu .mean-container a.meanmenu-reveal {
  color: #444444;
  font-size: 22px !important;
  padding: 0;
  text-indent: 0;
  z-index: 99;
  margin-top: -45px;
}

.header-mobilemenu .mean-container .mean-nav {
  background: #3423A6;
  background: #3423A6;
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  width: 100%;
}

.header-mobilemenu .mean-container .mean-nav > ul {
  max-height: 196px;
  overflow-y: auto;
}

.header-mobilemenu .mean-container .mean-nav > ul li a {
  padding: 7px 5%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.header-mobilemenu .mean-container .mean-nav > ul li a.mean-expand {
  padding: 3px 6px !important;
  height: 32px;
  line-height: 32px;
}

.header-mobilemenu .mean-container .mean-nav > ul li a.mean-expand:hover {
  background: rgba(255, 255, 255, 0.1);
}

.header-mobilemenu .mean-container .mean-nav > ul li li a {
  opacity: 1;
}

.header-mobilemenu .mean-container .mean-nav > ul li ul li a {
  padding: 7px 10%;
}

.header-mobilemenu .mean-container .mean-nav > ul li ul ul li a {
  padding: 7px 15%;
}

.header-mobilemenu .mean-container .mean-nav > ul li ul ul ul li a {
  padding: 7px 20%;
}

.header.sticky-active .header-bottomarea {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  -webkit-animation: slideInDown 0.5s ease-in-out 0s 1 both;
  animation: slideInDown 0.5s ease-in-out 0s 1 both;
}

`

<!-- Header Top Area -->
           <div class="header-toparea">
               <div class="container">
                   <div class="row">
                       <div class="col-md-7 col-sm-8 col-12">
                           <div class="header-topinfo">
                               <ul>
                                   <li><a href="tel://07828882838"><i class="flaticon-phone-call"></i>
                                           07828882838</a></li>
                                   <li><a href="mailto://contact@example.com"><i class="flaticon-envelope"></i>
                                           contact@example.com</a></li>
                               </ul>
                           </div>
                       </div>
                       <div class="col-md-5 col-sm-4 col-12">
                           <div class="header-topsocial">
                               <ul>
                                   <li><a href="https://twitter.com/"><i class="fab fa-twitter"></i></a></li>
                                   <li><a href="https://en-gb.facebook.com"><i class="fab fa-facebook-f"></i></a></li>
                               </ul>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
           <!--// Header Top Area -->

`

Randore · July 21, 2019, 5:32pm

I can’t give you the code but I can help you by suggesting the following.

To fix the navigation links on the top black header, the only way to do is to make the text responsive using em/rem/vh/vw and @media-queries.
To make that hamburger menu to always sit in the right-hand side and middle aligned.
use CSS FlexBox properties for eg: justify-content: space-around/space-between; align-items: center;

You can learn more about FlexBox flexboxfrog

ilenia · January 17, 2021, 9:33am