CSS Alignment/Position for "search bar" on top menu header

Solved
Highlighted
Excursionist
25 0 2

Hello,

We are suddenly having an issue on our website's top header where the search bar is no longer aligned with the rest of the items on the top navigation menu (see image attached):

css-alignment-top-header-menu-bar.png

 

 

link to website: 
https://onetreeplanted.org

 

Any help would be greatly appreciated,

 

Thank you in advance,

 

 

0 Likes
Excursionist
25 0 2

Below is the existing css file:

 

.header {
  z-index: 1000;
  width: 100%;
  top: 0;
  a, a:visited, a span, select.currencies {
    color: {{ settings.nav_color }};
    text-shadow: none;
  }
  div.container {
    padding-bottom: 5px;
    padding-top: 5px;
  }
}
body.is-active {
  overflow-y: hidden;
  #header {
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

#header.mobile_nav-fixed--true,
.mobile_nav-fixed--false.is-active #header {
  position: fixed;
  z-index: 1001;
  width: 100%;
  top: 0;
  left: 0;
}

#header {
  display: none;
  .top_bar {
    text-align: center;
    height: 40px;
    @include flexbox();
    @include align-items(center);
    .icon-search {
      z-index: 3;
      &:before {
        font-size: 18px;
      }
    }
    a {
      &.right {
        left: auto;
        right: 15px;
        font-size: 20px;
        padding-top: 8px;
        top: 4px;
        z-index: 1;
      }
      &.mobile_nav {
        @include flexbox();
        @include align-items(center);
        z-index: 1;
      }
    }
    > a, > a:visited, > a:active {
      display: block;
      font-size: 25px;
      outline: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    a span {
      color: {{ settings.top_bar_color }};
      display: inline-block;
      padding-left: 4px;
      position: relative;
    }
  }
}

#header .top_bar a.icon-bag:before,
#header .top_bar a.icon-cart:before {
  font-size: 18px !important;
}

.nav ul.mobile_menu li a {
  display: inline-block;
}

.menu .vertical-menu {
  li {
    position: relative;
  }
}
.vertical-menu {
  display: inline;
}

.menu .vertical-menu li:hover .vertical-menu_submenu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in;
  pointer-events: all;
  z-index: 2000;
}

.menu .vertical-menu_submenu li:hover .vertical-menu_sub-submenu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in;
  pointer-events: all;
  z-index: 2000;
}

.menu .vertical-menu_submenu {
  position: absolute;
  left: 0;
  top: 100%;
  padding-left: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  pointer-events: none;
  text-align: left;
  width: 270px;
  @include background-opacity({{ settings.header_bg_color }}, {% if settings.transparent_header %}0.9{% else %}1{% endif %});
  li {
    padding: 0 20px;
    display: block;
  }
  a {
    display: block;
  }
  span.icon-down-arrow {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

.menu .vertical-menu_submenu.is-visible,
.menu .vertical-menu_sub-submenu.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in;
  pointer-events: all;
  z-index: 2000;
}

.menu .vertical-menu_sub-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  padding-left: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 5s ease-in;
  pointer-events: none;
  width: 270px;
  @include background-opacity({{ settings.header_bg_color }}, {% if settings.transparent_header %}0.9{% else %}1{% endif %});
  li {
    padding: 0 20px;
    display: block;
  }
  a {
    display: block;
  }
}

.vertical-menu_submenu.vertical-menu--align-right {
  right: 0;
  left: auto;
}

.vertical-menu_sub-submenu.vertical-menu--align-right {
  right: 100%;
  left: auto;
}

.top_bar {
height: 40px;
background-color: {{ settings.top_bar_bg_color }};
padding: 0 0 0 10px;
.social_icons {
float: left;
margin: 0;
padding-left: 10px;
li {
padding: 5px;
}
}
a {
@include flexbox();
@include align-items(center);
}
ul.social_icons a {
display: inline;
@include flex(none);
}
.top_bar--right {
@include flexbox();
@include align-items(center);
margin-left: auto;
height: 40px;
.icon-search {
display: inline-block;
line-height: 0;
padding-right: 15px;
}
.cart_container {
display: inline-block;
}
}
}
.main_nav,
.dropdown {
@include background-opacity({{ settings.header_bg_color }}, {% if settings.transparent_header %}0.9{% else %}1{% endif %});
clear: both;
transition: all 0.3s linear;
animation: fadeIn 0.3s linear none;
}
{% if settings.header_background == false %}
.feature_image .main_nav,
.feature_image .dropdown {
background: transparent;
}
{% endif %}
.sticky_nav {
position: fixed;
width: 100%;
z-index: 35;
top: 0;
left: 0;
padding: 0;

/* Translate -100% to move off screen */
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
/* Animations */
transition: all 300ms ease-in-out;
}
.is-active .sticky_nav {
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
.sticky_nav--stick {
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
@include respond-to('medium-down') {
display: none;
}
}
.sticky_nav--unstick {
opacity: 0;
transition: opacity 0s;
}
.sticky_nav ul.menu, .sticky_nav .mini_cart {
padding-bottom: 0 !important;
}
.menu.center,
.menu.align_right,
.menu.align_left {
margin: 0 20px;
}
.menu {
display: block;
border: none;
padding: 0;
margin: 0;
li {
display: inline-block;
margin: 0;
border: 0;
}
}
.nav ul li a.sub-menu {
padding: 10px 4px 10px 4px;
z-index: 1001;
}
.nav ul li:hover a.sub-menu {
color: {{ settings.nav_color }};
}

 

 

0 Likes
Highlighted

Success.

Shopify Partner
1197 162 322

Looks like there's an extra div around your search that's causing the issue. If you can find your search in  your code if you change the div to a span tag it will fix the issue

<div class="search-wrapper"> 
  <li class="search_container" data-autocomplete-true=""> 
    <form action="/search" class="search_form" siq_id="autopick_709"> 
      <span class="icon-search search-submit"></span> 
      <input type="text" name="q" placeholder="Search" value="" autocapitalize="off" autocomplete="off" autocorrect="off">
      <div class="search__results-wrapper">
        <ul class="search__results">
        </ul>
      </div>
    </form>
  </li> 
  <li class="search_link"> 
    <a href="/search" class="icon-search dropdown_link" title="Search" data-dropdown-rel="search" data-no-instant="true" data-click-count="0">
    </a>
  </li>
</div>

Change the "search-wrapper" div to a span:

 

<span class="search-wrapper"> 
  <li class="search_container" data-autocomplete-true=""> 
    <form action="/search" class="search_form" siq_id="autopick_709"> 
      <span class="icon-search search-submit"></span> 
      <input type="text" name="q" placeholder="Search" value="" autocapitalize="off" autocomplete="off" autocorrect="off">
      <div class="search__results-wrapper">
        <ul class="search__results">
        </ul>
      </div>
    </form>
  </li> 
  <li class="search_link"> 
    <a href="/search" class="icon-search dropdown_link" title="Search" data-dropdown-rel="search" data-no-instant="true" data-click-count="0">
    </a>
  </li>
</span>
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
25 0 2

This worked perfectly!

Thank you very much @Ninthony !

0 Likes
Highlighted
Shopify Partner
1197 162 322

No problem, glad it helped.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes