wp_nav_menu seems to add a block?

  • aloha1010110

    (@aloha1010110)


    9 years ago

    <header class="main-navigation" style="border: 2px solid">
        <img src=<?php echo get_bloginfo('template_url') . '/images/logo_apparent.png'?>>
        <?php wp_nav_menu(array('container' => 'nav'))?>
    </header>

    https://imgur.com/1d41KnA

    I’m trying to get the image logo and navigation menu inlined with each other, but the menu is on its own new line, or block. How can I get these horizontally aligned with each other?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi there Aloha1010110!
    Can you please share a link to your site?

    Thread Starter aloha1010110

    (@aloha1010110)

    Hi, the site’s not live, just testing on localhost. But the html is being rendered like this:

    <header class="main-navigation" style="border: 2px solid">
        <img src=https://localhost/wordpress/wp-content/themes/apparent/images/logo_apparent.png>
        <nav class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="https://localhost/wordpress/">How it Works</a>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8"><a href="https://localhost/wordpress/">Features</a>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="https://localhost/wordpress/">Support</a>
</nav>    </header>

    I can’t really help you with just knowing the html. You need to use display: inline and “float” left and right.

    What theme do you use? And where did you get this code?

    Thread Starter aloha1010110

    (@aloha1010110)

    I’m trying to create my own theme. The code is the same in my original post, except that wp_nav_menu() is being “rendered” after being processed server side.

    I’ve tried both display inline on both the nav and img elements, but it doesn’t bring the nav menu horizontally aligned with the logo.

    It’s weird because I see no block elements in the rendered html, but it is being rendered as if there is. Normally, you wouldn’t need to use float as both img and ul elements are inline.

    stephencottontail

    (@stephencottontail)

    On modern browsers, <nav> is often a block-level element by default. Are you overriding that? Can you post the relevant CSS to Pastebin and post the link here?

    Thread Starter aloha1010110

    (@aloha1010110)

    Thanks, Stephen. I thought nav was inline! It’s working now.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘wp_nav_menu seems to add a block?’ is closed to new replies.