1

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:

Menu looking as expected

and

Logo text stacked on top of menu

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;
}
1
  • Welcome to JSE. Please take our tour while you wait for support.
    – mickmackusa
    Aug 4 '20 at 20:04
2

Quick and easy:

#sp-header #sp-logo {
  display: table; 
  margin: auto;
}

Change display: table; to display: inline-flex since this appears to be a flex box.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.