Formatting HTML generated from PHP in Wordpress theme for site text logo

Question

I'm setting up a website using a Wordpress theme that has built in options for graphic and text logos. I want to use the built in text logo feature but I want to break the logo apart so multiple fonts and formatting could be used in the logo.

The header.php file calls the logo using this code:

    <?php napoli_site_logo(); ?>

The resulting HTML looks like this:

    <a href="http://www.psphotography.com/" class="logo">
         <span>Paige Stumbo</span>      </a>

It pulls the logo text from a field in the theme setup and references .right-menu .logo span in the main CSS to get it's formatting.

To duplicate the logo I take the HTML from above and put it in the header.php file under

    <?php napoli_site_logo(); ?>

I changed the HTML for the class= to reference "logo1" instead of logo then duplicated all the .right-menu .logo span in the CSS file and changed it to .logo1 instead.

This gave me the result I was looking for, two separate text logos are now visible on the homepage side by side.

The resulting HTML looks like this:

    <!-- LOGO -->
    <a href="http://www.psphotography.com/" class="logo">
         <span>Paige Stumbo</span>      </a>
    <a href="http://www.psphotography.com/" class="logo1">
         <span>PHOTOGRAPHY</span>       </a>
    <!-- /LOGO -->

How do I get the second logo below the first instead of side by side? I know how to achieve this with basic HTML formatting but since the HTML is being generated from PHP I'm lost.

Answer 1

Apply the following CSS:

.logo {
  display: block !important; 
}
.logo1 {
  display:block !important; 
}

Fiddle showing it working: https://jsfiddle.net/tet4djoc/