I inherited work on a site that uses Joomla, SP Page Builder, Helix Ultimate framework (based on Bootstrap 4), and a 3rd party template. Needless to say, it's been messy trying to make modifications, wading through the copious amounts of (sometimes conflicting) CSS.
I've created a header for the site that has logo text on the left (want to keep it always in place) and the menu on the right. The page is supposed to be responsive, so when the screen shrinks to a large width breakpoint the menu becomes an offcanvas toggle.
However, in Chrome and Firefox I'm not getting the layout I'm looking for. (Safari works OK) When the screen shrinks, the logo text stacks on top of the menu even though there seems to be enough room for them to be side by side. Any suggestions on where I should be looking at the CSS?
Images here:
and
Snippet of generated HTML code: (uses Bootstrap container class)
<header id="sp-header">
<div class="container">
<div class="container-inner">
<div class="row" style="position: relative;">
<div id="sp-logo" class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 ">
<div class="sp-column ">
<span class="logo"><a href="/">OneLife Africa</a></span>
</div>
</div>
<div id="sp-menu" class="col-9 col-sm-9 col-md-9 col-lg-9 col-xl-9 " style="position: static;">...</div>
Relevant CSS:
#sp-header {
background: white;
height: inherit;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 99;
box-shadow: none;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border-bottom: 5px solid #b55;
}
#sp-header > .container {
min-width: 100%;
margin: 0px;
padding-right: 30px;
}
#sp-header #sp-logo {
display: table;
margin: auto;
}
#sp-header .logo a {
font-size: 2rem;
font-weight: 600;
color: black;
line-height: 1;
margin: 0;
padding: 0;
min-width: 250px;
float: left;
}
#sp-header .logo p {
margin: 5px 0 0;
}
