As I work on creating a responsive HTML page using Bootstrap CSS, my focus is on the navbar-brand class that contains a logo element. Here's the code snippet in question:
<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>
While the mycss-aligned class pertains to some list dimensions and doesn't impact our issue, the relevant CSS from Bootstrap has been tweaked for customization purposes 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%;
}
In an attempt to align a HTML div at the center with a width of 60% of the screen, I've encountered challenges aligning it exactly where the logo starts. Despite adjusting the margin-left value significantly within .navbar-brand>img, the design lacks responsiveness with the logo failing to move along with the division when the page is resized. Interestingly,
<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
this particular section behaves responsively. How can I address this issue effectively?