Can you please make some major edits and then re-open?
I am currently developing a page using Bootstrap 2.3.2, which will eventually serve as a template for Joomla 3.x.
Within the header section, I have successfully positioned 6 elements as per the design requirements.
Issue at hand
The challenge I am facing is related to positioning the nav-pills section at the bottom of the container that features an image as its background-image.
- Applying
margin-topon the.minimenucontainer within thenav-pillsdoes move it downwards, but the alignment is with respect to the top. My aim is to align it with the bottom instead. - Even after attempting
vertical-align: bottom;, I have not been able to find a suitable solution to the problem.
https://i.sstatic.net/E2Q4w.jpg
Here is a snippet of the HTML code:
<div class="container">
<p class="headtitle">This is the Headline on Top!</p>
<div class="header">
<img src="http://www.chris-nlp-hall.com/tmp/logo1.png" class="pull-left logo1" />
<img src="http://www.chris-nlp-hall.com/tmp/logo2.png" class="pull-right logo2" />
<div class="mininav">
<ul class="nav nav-pills">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Learn</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
</div>
</div>
Below is the CSS code being used:
p.headtitle {
text-align: center;
font-size: 1.4rem;
}
.header {
background-image: url(http://www.chris-nlp-hall.com/tmp/center.png);
background-position: center top;
background-repeat: no-repeat;
height: 160px;
}
.mininav {
text-align: center;
vertical-align: bottom; /* hasn't been effective */
}
.mininav .nav-pills {
display: inline-block;
}
.header .logo1 {
margin-left: 10px;
}
.header .logo2 {
margin-right: 10px;
}
To view the updated fiddle, click here: https://jsfiddle.net/michi001/srzwz8o4/