Accepted Solutions
Hi Nataliya,
I'm going to start with your padding question first. It's not actually an issue of padding. You can use Chrome Dev Tools to inspect (right-click the element on the page, then click Inspect from the dropdown menu) the two navbars you have in your header. Highlighting a portion of the code will show you want element is being controlled on the web page. In the Styles section of the Dev Tools, you can then scroll the CSS rules being applied to this element and toggle the checkboxes on and off until you find what attribute is the culprit. In this case, the padding is not padding and it actually comes from a min-height that is set on this element from Bootstrap and is therefore part of our codebase.
I think you were trying to fix it by using .first-tier {height: 0;}, but that wouldn't work because height and min-height don't negate one another. To fix the space between your headers, you would want to add this line of CSS to your code.
.site-header .custom-header .navbar {
min-height: auto;
}
As for your issue with a responsive state, your have a couple different factors at play.
1) You do have media queries, which is good, as those are what will help you control your custom header at different sizes. But they are used on classes that don't exist in your code at all. It looks like you're trying to hide navigation links at smaller sizes, but when I shrink your header down, I don't see any classes that do the hiding (eg. .header-container .navbar.navbar-default .navbar-collapse.collapse). If the classes aren't there in your HTML, then your CSS and media queries won't work and that's why your links are wrapping and overflowing the header instead of collapsing into a mobile menu.
2) Based on the classes you have in your CSS, I think you were trying to use https://getbootstrap.com/docs/3.4/components/#navbar to handle the responsive state for you. If that's the case, you need to base your HTML on that example. We use Bootstrap 3, but in order to have Bootstrap handle the responsive behavior for you, you need to format your HTML following their guidelines. You are currently missing the part that generates the burger menu and contains the data-target that ties it to the matching ID on your nav-collapse div.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- This is what generates your burger menu icon on mobile -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a><!-- This is optional and can be removed. -->
</div>
<!-- This is what gets hidden behind the burger menu icon -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link C (Dropdown)<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
<li><a href="#">Dropdown Link 3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Right-aligned Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
<li><a href="#">Dropdown Link 3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
So you have two options for a more responsive header, you can either format your HTML to follow the Bootstrap specification, which will handle responsiveness for you or you can tie media queries to the actual classes you have in your HTML. Although, if you do the latter, I recommend you add more unique classes to your btn-group divs, so that you can associate a media query to something less generic.
Klara,
Thank you very much for your help. It worked perfect. I was able to restructure my header and got a responsive design working.
I do have one more issue left with this. I would like my right menu to be on the top, and pulled to the right, just like in screenshot below.
However, when I am in the mobile view the top (right) menu is getting hidden behind my second menu, and I cannot figure out how to adjust the width so both menus are displayed. I am sure it's something easy that I am missing?
Thank you so much for your help.
Nataliya
That definitely helped with the float. Thank you. However if the screen is too small (like on my phone), the vertical scroll list turns into horizontal menu with the scroll bar. Is there a way to avoid that? It behave same way to if i resize Chrome or Firefox window, and on my phone.
Thanks,
