1

I am struggling to adjust the height of the navbar for mobile devices on the Shopify platform. I am using Bootstrap v2.1.0 if it makes a difference. Here is the HTML for the navbar:

<div class="navbar{% if settings.inverse_color %} navbar-inverse{% endif %} navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <!-- COLLAPSE BUTTON -->
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
                <div class="nav-collapse collapse">
                <!-- LOGO IN NAV BAR -->
            {% if settings.logo_position == 'header' %}
            {% if settings.use_logo_image %}
                <a class="logo logo-header-image fl hidden-tablet hidden-phone" href="/" title="{{ shop.name }}">
                    <img src="{{ 'header_logo.png' | asset_url }}" alt="{{ shop.name }} Logo">
                </a>
            {% else %}
                <a href="/" class="logo logo-header fl hidden-tablet hidden-phone" title="{{ shop.name }}">{{ shop.name }}</a>
            {% endif %}
            {% endif %}
            <!-- MAIN NAVIGATION -->
            <ul class="nav">
            {% for link in linklists.main-menu.links %}
            {% capture child_list_handle %}{{ link.title | handle }}{% endcapture %}
            {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
            <li class="dropdown{% if link.active %} active{% endif %}" id="menu{{ forloop.index }}" >
            <a class="dropdown-toggle" data-toggle="dropdown" href="#menu{{ forloop.index }}" title="View {{ link.title }}">
            {{ link.title }}
            <b class="caret"></b>
            </a>

I've tried the solutions here Decreasing height of bootstrap 3.0 navbar & Custom height Bootstrap's navbar but have been unsuccessful.

This is what I've tried adding to my CSS under mobile:

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar .brand { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar-inverse, .navbar-fixed-top, .navbar, .navbar-inner { min-height: 35px !important; }

Thank you in advance!

Community
  • 1
  • 1
EricY
  • 376
  • 1
  • 3
  • 19
  • Have you tried adding [@media queries to the navbar](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) in your css? –  Mar 29 '15 at 06:58
  • Yeah, that's where I was trying to do the styling. I'm thinking I have the names of the classes mixed up. – EricY Mar 29 '15 at 09:44

1 Answers1

0

Remember bootstrap is mobile - first and you have to reference for anything above that. So simply adding .navbar {height: /* your height!important; */ should do the trick. You may need to add @media (min-width :768px) to change it back to original but that is at most.

Shea Hunter Belsky
  • 2,815
  • 3
  • 22
  • 31
blayderunner123
  • 306
  • 2
  • 11