Logo in BootStrap navbar-brand class behaving weridly - html

Question

I am designing a responsive HTML page using bootstrap css. I am using the navbar-brand class in which there is a logo. The code for that segment is:
<div class="grad">
<a class="navbar-brand" id="navbar-logo" href="http://someUrl"><img src="images/someLogo.gif" height="43" alt="logo"></a>
<div>
<ul class="nav navbar-nav mycss-aligned">
<li><span class="name">LastName, FirstName</span></li>
<li><span class="logo1">some</span><span class="logo2">Stuff</span></li>
</ul>
</div>
</div>
That mycss-aligned is just a few dimensions for the list below it and is not relevant to our problem so I am not sharing it. The relevant CSS from BootStrap has been slightly modified by me to suit my needs and it is as follows:
.navbar-brand {
float: left;
height: 60px;
padding: 10px 10px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand>img {
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
height: 100%;
max-width: 100%;
width: auto;
margin: 0 auto;
margin-left:125%;
margin-top:-5%;
}
I have a HTML div which is center aligned and has 60% width of total screen. I am trying to match the start of the division with the start of the logo. While I can achieve this, as you can see, I am required to use an unusually high percentage for the margin-left value in .navbar-brand>img. That being said, Even when I can achieve that, the design is barely responsive and the logo does not slide across along with the division when the page is resized. The funny thing is
<div>
<ul class="nav navbar-nav mycss-aligned">
<li><span class="name">LastName, FirstName</span></li>
<li><span class="logo1">some</span><span class="logo2">Stuff</span></li>
</ul>
</div
is perfectly responsive. What can I do to solve this?

Answer 1

First I would suggest that you use more of the bootstrap components to create a context for the elements you want to use. E.g. there is a navbar-fixed-top class.
You can see my fork of the code on jsfiddle There is an outline on all divs to visualise the alignment.
Here is how I would write the same
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-content">
<a class="navbar-brand" id="navbar-logo" href="http://someUrl">
<img src="images/someLogo.gif" height="43" alt="logo">
</a>
<ul class="navbar-list">
<li><span class="name">LastName, FirstName</span>
</li>
<li><span class="logo1">Some</span><span class="logo2">Stuff</span>
</li>
</ul>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div style="width: 60%; margin:0 auto; text-align:justify;">
<br>
<br>
<br>
<br>
<br>
<br>This is just some uberRandom text to show how the division is getting aligned and justified
</div>
</div>
</main>
And the re-written css
.navbar {
background: linear-gradient(white, grey);
box-shadow: 0 0 10px #333;
}
.navbar-content {
width: 60%;
margin: 0 auto;
font-size: 13px;
line-height: 17px;
}
.navbar-list {
float: right;
margin-top: 5px;
}
.navbar-brand {
padding: 0;
}
.navbar-brand>img {
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
height: 100%;
max-width: 100%;
padding-top: 10px;
margin: 0 auto;
}
Notice how there is an inner content of the navbar that is set to same width as the actual content (the paragraph). That way you don't have to use those silly margins and the image and text should align.