Having matching mobile and desktop header designs

[Aaron_mihell1]

Hi. I really like the header design on the desktop view although when I switch it to mobile view it changes to a completely different design.

I am currently using a custom theme although am unsure of what part of the code I need to edit to make this change.

I will attach my header code below as I believe that is what needs editing although I am not entirely sure.

The link to my store is www.furfree.co.uk if that is of any help.

if anyone could help it would be very much appreciated.

<header id="header" class="header-v4-h4 js_height_hd jsheader4 d-none d-xl-block {% if settings.hdv4_enable_absolute %}header-absolute {% endif %}">
   {% include 'eveland-horizon-menu' %}
  <div class="container container-v1">
    <div class="row align-items-center">
      <div class="col-lg-5">
        <div class="menu left">
          <div class="model_menu js-model_menu">
            <span class="model-menu-icon">
              <span></span>
              <span></span>
              <span></span>
            </span>
            {% if settings.name_modal_menu_hdv4 != blank %}
            <span class="model-menu-title">{{settings.name_modal_menu_hdv4}}</span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="col-lg-2 text-center">
        <div class="logo">
          <div class="center logo delay05">           
            {% if settings.hdv4_logo_svg !=blank %}
            <div class="logosvg" style="max-width:{{settings.hdv4_logo_maxwidth}}px;">
              <a class="logourl" href="{{shop.url}}">{{settings.hdv4_logo_svg}}</a>
            </div>
            {% else %}            
            <a href="{{shop.url}}">
              {% if settings.hdv4_logo != blank %}
              <img src="{{settings.hdv4_logo|img_url:'master'}}" width="{{settings.hdv4_logo_maxwidth}}" alt="{{shop.name}}">
              {% else %}
              <img src="//placehold.it/45x45" width="{{settings.hdv4_logo_maxwidth}}" alt="{{shop.name}}">
              {% endif %}
            </a>
            {% endif %}          
          </div>
        </div>
      </div>      
      <div class="col-lg-5 currencies-login">
        <div class="cart-login-search align-items-center"> 
          <ul class="list-inline list-unstyled mb-0">
            <li class="list-inline-item mr-0">
              <a href="javascript&colon;void(0)" class="search js-search-destop">
                {% if settings.hd_icon_search_svg != blank %}
                {{settings.hd_icon_search_svg}}
                {% else %}
                <i class="{{settings.hd_icon_search}}"></i>
                {% endif %}
              </a>
            </li>
            <li class="list-inline-item mr-0">
              <a href="javascript&colon;void(0)" class="cart js-call-minicart">
                {% if settings.hd_icon_cart_svg != blank %}
                {{settings.hd_icon_cart_svg}}
                {% else %}
                <i class="{{settings.hd_icon_cart}}"></i>
                {% endif %}
                <span class="number-cart enj-cartcount">{{ cart.item_count }}</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</header>

<style>
  .header-v4-h4{
    background-color : {{settings.hdv4_bg_header_normal}};
  }
  #header .menu ul li .nav-link{
    color: {{settings.hdv4_color_text}};
  }
  #header .menu ul li .nav-link:before{
    border-bottom: 2px solid {{settings.hdv4_color_text}};
    border-right: 2px solid {{settings.hdv4_color_text}};
  }
  #header .menu ul li .nav-link:after{
    border-top: 2px solid {{settings.hdv4_color_text}};
    border-left: 2px solid {{settings.hdv4_color_text}};
  }
  
  #header .currencies-login .cart-login-search ul li a svg{
    fill : {{settings.hdv4_color_text}};
  }
  #header .currencies-login .cart-login-search ul li a i{
    color : {{settings.hdv4_color_text}};
  }
  #header .currencies-login .cart-login-search ul li .cart .number-cart{
    background-color : {{settings.hdv4_bg_color_cart}};
    color: {{settings.hdv4_color_cart}};
  }
  .header-v4-h4 .model_menu{
    color : {{settings.hdv4_color_text}};
  }
  .header-v4-h4 .model_menu .model-menu-icon span{
    background : {{settings.hdv4_color_text}};
  }
  .header-v4-h4 .horizon-menu-home{
    background : {{settings.hdv4_bg_menu}};
  }
  .header-v4-h4 .horizon-menu-home .main-navigation .menu-horizon-list .nammenu{
    color : {{settings.hdv4_color_menu_title}};
  }
  .horizon-menu-home .main-navigation .menu-horizon-list .nammenu:before{
    color : {{settings.hdv4_color_menu_title}};
  }
  .horizon-menu-home .main-navigation .menu-horizon-list .toggle-menumobile i{
    color : {{settings.hdv4_color_menu_title}};
  }
  .horizon-menu-home .main-navigation .menu-horizon-list .title_menu_mb.title_only_one a{
    color : {{settings.hdv4_color_menu_title}};
  }
  .horizon-menu-home .main-navigation .menu-horizon-list .title_menu_mb.title_only_one a:hover{
    opacity : .8;
  }
  
  .horizon-menu-home .main-navigation .menu-horizon-list .title_menu_mb a{
    color : {{settings.hdv4_color_menu_title}};
  }
  
  .horizon-menu-home .main-navigation .menu-horizon-list .title_menu_mb a:hover{
    opacity : .8;
  }
  .horizon-menu-home .main-navigation .menu-horizon-list ul li a{
    color : {{settings.hdv4_color_menu_title}};
  }
  
  .horizon-menu-home .main-navigation .menu-horizon-list ul li a:hover{
    opacity : .8;
  }
  .horizon-menu-home .close-menu-horizon{
    color : {{settings.hdv4_color_menu_title}};
  }
</style>

[KetanKumar]

@Aaron_mihell1 

Thanks for details sorry your store is password protect 

[Aaron_mihell1]

Hi Ketan,

There shouldn't be a password. I just checked my Shopify store preferences and it's disabled.

The link is www.furfree.co.uk

[KetanKumar]

@Aaron_mihell1 

like this?

[Aaron_mihell1]

Hi Ketan,

That's perfect. How would I go about making this change?

[Aaron_mihell1]

Actually I did just notice that the menu button, logo, search and cart icons are all in black.

On the desktop header, all the icons are white when you're at the top of the homepage and it changes as you scroll which is also what I am trying to achieve on the mobile view.

I am not sure how you have coded it but I just want to remove the code that changes it to the mobile style header when the screen size becomes smaller if that makes sense?

[KetanKumar]

@Aaron_mihell1 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like