Search code examples
phphtmlcsswordpressfooter

Making text and a PHP element display on the same line

I'm making a footer for a site I'm developing, and it currently looks like this:

enter image description here

I'm trying to get everything in the footer to display on a single line. The problem is that the link to my Privacy Policy page is a PHP element that links to a WordPress menu item, and it really doesn't want to be on the same line with anything else. I can't get it to budge no matter what I try.

Here's the snippet from the footer.php file. I've also tried replacing the <span> tag with a <p> tag, that hasn't worked.

<footer id="site_footer">
    <span>Site Name &copy; 2017 | Powered by <a href="https://wordpress.org/">WordPress</a> | <?php wp_nav_menu(array('theme_location' => 'footer_nav')); ?> |</span>
</footer>

And here's the CSS. I've tried adding display: inline; and display: block-inline; in every conceivable combination to these divs and it doesn't make a difference.

/* ~~~ Footer Navigation ~~~ */

#site_footer span {
    font-size: 14px;
    color: #eeeeee;
}

#site_footer a {
    font-weight: bold;
    color: #eeeeee;
    text-decoration: none;
}

#site_footer ul li {
    list-style: none;
}

I've considered abandoning the PHP approach and just using <a> tags, but I want to keep the menu capabilities WordPress offers in case I want to add more links to the footer in the future. Does anyone know how I can get the PHP element to sit on the same line as the rest of the text?

Solution

  • You can use inline style display: inline-block; in a div tag

    <footer id="site_footer">
    <span>Site Name &copy; 2017 | Powered by <a href="https://wordpress.org/">WordPress</a> |<div style="display: inline-block;"> <?php wp_nav_menu(array('theme_location' => 'footer_nav')); ?> </div> |</span>
</footer>