Having matching mobile and desktop header designs

Aaron_mihell1
Excursionist
22 0 5

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
Shopify Partner
15721 1753 5785

@Aaron_mihell1 

Thanks for details sorry your store is password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Aaron_mihell1
Excursionist
22 0 5

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

0 Likes
KetanKumar
Shopify Partner
15721 1753 5785

@Aaron_mihell1 

like this?

KetanKumar_0-1611685998333.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Aaron_mihell1
Excursionist
22 0 5

Hi Ketan,

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

 

0 Likes
Aaron_mihell1
Excursionist
22 0 5

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
Shopify Partner
15721 1753 5785

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes