I have looked at a lot of questions that have already been asked and can't find and answer that works for me. I am trying to make a logo that has an ampersand in the middle. The Ampersand is supposed to change font familys every few seconds which works. Only issue is that now when it changes font it messes up the who page.

Main issues are ing from line 21 in the CSS

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

Any ideas?

I have looked at a lot of questions that have already been asked and can't find and answer that works for me. I am trying to make a logo that has an ampersand in the middle. The Ampersand is supposed to change font familys every few seconds which works. Only issue is that now when it changes font it messes up the who page.

https://codepen.io/anon/pen/BVddWV

Main issues are ing from line 21 in the CSS

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

Any ideas?

• javascript
• html
• css

• 1 I think you want inline-block instead of inline. – Pointy Commented Jun 14, 2018 at 12:55
• @Pointy Sadly the problem persists – Tristan Schlarman Commented Jun 14, 2018 at 12:57
• You can set height for parent b tag and make overflow : hidden but can't set the fix height for dynamic ampersand. – dekts Commented Jun 14, 2018 at 13:00
• I think you should mix position relative and absolute to make that logo keeps its position. – Red Commented Jun 14, 2018 at 13:02
• 35px isn't really wide enough, and one of the ampersand fonts has a weirdly tall height. – Pointy Commented Jun 14, 2018 at 13:07

2 Answers 2

Added display: flex on the <b> tag and removed ampersand styles and made it a span instead of a div and added line-height: 1 to it.

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>

$(document).ready(function() {
  var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];
  var counter = 0;
  var inst = setInterval(change, 2000);

  function change() {
    if (counter > fonts.length) {
      counter = 0;
    }
    font_selection = fonts[counter];
    $('.ampersand').css("font-family", font_selection);
    counter++;
  }
});

@import url('https://fonts.googleapis./css?family=Quicksand');
@import url('https://fonts.googleapis./css?family=Molengo');
@import url('https://fonts.googleapis./css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');
* {
  font-family: "Gill Sans", sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f5f6fa;
}

#header {
  width: 100%;
  padding: 4% 0px 20px 0px;
}

.logo_text {
  font-family: "Molengo", sans-serif;
  font-size: 70px;
  color: #333;
}

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

.nav {
  width: 100%;
  padding: 25px 0px 25px 0px;
}

.nav>ul {
  padding-top: 15px;
}

.nav>ul>a {
  text-decoration: none;
  color: #333;
}

.nav>ul>a>li {
  color: #333;
  font-size: 25px;
  padding: 20px 30px 20px 30px;
  display: inline;
  transition: border 0.1s linear;
  border: 3px solid #f5f6fa;
}

.nav>ul>a>li:hover {
  border: 3px solid #333;
}

#body {
  padding-top: 35px;
  width: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper" align="center">

  <div id="header">
    <div class="logo">
      <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
      </span>
    </div>
    <div class="nav">
      <ul>
        <a href="#">
          <li>Home</li>
        </a>
        <a href="#">
          <li>About</li>
        </a>
        <a href="#">
          <li>Music</li>
        </a>
        <a href="#">
          <li>Media</li>
        </a>
        <a href="#">
          <li>Contact</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="body"></div>
</div>

You are not able to set fixed hight for inline elements.

And you need to switch to display:inline-block or display:block to transform your elements into block elements.

Also please note, that some elements like <span> or <i> are inline by default, and some like <div> and <p> are block, but you are still able override that behavior (default) via CSS display rule.

In your case (I assume you would like to prevent jumping of your logo text, when ampersand changes font), I would suggest two things:

1. set fixed height to the .logo_text, you could add display:block and max-height: 84px;
2. set ampersand as span not as div to make your HTML markup more semantically relevant;