top navigation resize when no side navigation - html

Question

I'm having a problem with top navigation resizing. I have two layouts - one with side and top navigation and one just with top navigation. When I'm in template without side navigation, my top nav li elements are resizing and they're slightly bigger then in the main layout with both navbars. I have no clue why this is happening, because both layouts use the same 'topnav.html' template and the css is also the same. I'm using bootstrap 3 and I'm wondering if maybe bootstrap grid is the one to blame. I've tried to add the same div structure in my layout_no_navbar.html as in layout.html template, but it didn't work. My goal is to maintain the same top navigation li sizes in both layouts. Please, help!
Here is the part of my main layout with both navbars (layout.html):
<div class="row">
<div class="col-md-3">
{% include 'portal/layout/navbar.html' %}
</div>
<div class="col-md-9">
<div class="content-container">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
{% include 'portal/layout/topnav.html' %}
</nav>
<div id="page-wrapper">
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% block content %}
{% endblock %}
</div>
<!-- /#page-wrapper content-container -->
</div>
</div>
</div>
Here's the layout without side navbar (layout_no_navbar.html):
<div>
{% include 'portal/_user_edit_modal.html' %}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Navigation -->
{% include 'portal/layout/topnav.html' %}
</nav>
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% block content %}
{% endblock %}
</div>
in both layouts I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
and here are the pic's of both top navbar in different layouts. For example, the 'logout' size in layout.html is : 104.8 x 50 and in top nav in layout_no_navbar.html it's 107.5 x 50. I know it's hard to see the difference, but believe me, it's noticeable while jumping between pages. For examle, you can notice it while looking on 'J' letter in 'Józio Wacławiński'
top navbar in layout.html
top navar in layout_no_navbar.html

Answer 1

I'm not sure that I understand the question, but...
In the layout_no_navbar.html, you haven't wrapped your topnav.html with , so it takes more width than in layout.html. So you can do something like:
<div>
{% include 'portal/_user_edit_modal.html' %}
<div class="row">
<div class="col-md-9 col-md-offset-3">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Navigation -->
{% include 'portal/layout/topnav.html' %}
</nav>
</div>
</div>
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% block content %}
{% endblock %}
</div>
In your layout_no_navbar.html file.
Hope it helps. :)