I’m not sure why the menu is being pushed below the logo? Drupal Seven is adding the 2 classes section & clearfix to my id of header. I’m expecting it to just be even next to it, I added the ugly borders to see what could be keeping it from flowing up.
css
/**
* @file
* Stark layout method
*
* To avoid obscuring CSS added to the page by Drupal or a contrib module, the
* Stark theme itself has no styling, except just enough CSS to arrange the page
* in a traditional "Header, sidebars, content, and footer" layout.
*
* This layout method works reasonably well, but shouldn't be used on a
* production site because it can break. For example, if an over-large image
* (one that is wider than 20% of the viewport) is in the left sidebar, the
* image will overlap with the #content to the right. The exception to this
* is IE6 which will just hide the navigation block completely in these
* instances due to a positioning bug.
*/
#content,
#sidebar-first,
#sidebar-second {
float: left;
display: inline;
position: relative;
}
#content {
width: 100%;
}
body.sidebar-first #content {
width: 80%;
left: 20%; /* LTR */
}
body.sidebar-second #content {
width: 80%;
}
body.two-sidebars #content {
width: 60%;
left: 20%;
}
#sidebar-first {
width: 20%;
left: -80%; /* LTR */
}
body.two-sidebars #sidebar-first {
left: -60%; /* LTR */
}
#sidebar-second {
float: right; /* LTR */
width: 20%;
}
.section {
margin: 10px;
}
@font-face {
font-family: MuseoSans;
src: url(css\Fonts\Museo_Sans\MuseoSans-300.otf);
}
@font-face {
font-family: OpenSans;
src: url(css\Fonts\Open_Sans\OpenSans-Regular.ttf);
}
body{
font-family: OpenSans;
}
.left-and-right-padding{
padding-left: 7%;
padding-right: 7%;
}
.left-and-right-padding20{
padding-left: 13%;
padding-right: 13%;
}
.members{
display: block;
text-align: center;
margin: 0 auto;
}
h3{
font-family: MuseoSans;
font-weight: 300;
color: white;
}
h1{
font-family: MuseoSans;
font-weight: 100;
color: white;
font-style: italic;
}
/*.header{*/
/* position: fixed;*/
/* top: 0;*/
/* box-sizing: border-box;*/
/* border: thick double #32a1ce;*/
/*}*/
/* .footer{
position: fixed;
bottom: 0px;
width:100%;
} */
#block-system-navigation {
float: right;
clear: both;
border: thick double #32a1ce;
}
a {
border: thick double #32a1ce;
}
html
<div id="header"><div class="section clearfix">
<a href="/" title="Home" rel="home" id="logo">
<img src="http://drup7-cloned-turtlewolfe.c9users.io:80/sites/all/themes/opendrop/logo.png" alt="Home">
</a>
<div class="region region-header">
<div id="block-system-navigation" class="block block-system block-menu">
<div class="content">
<ul class="menu"><li class="first leaf"><a href="https://www.opencharityuk.org/#about" title="">About</a></li>
<li class="collapsed"><a href="/blog">Blogs</a></li>
<li class="last leaf"><a href="https://www.meetup.com/Open-Charity/" title="Charities and Partners collaborating and sharing open solutions and ideas to create value in the digital space">Join Us</a></li>
</ul> </div>
</div>
</div>
</div></div>
