themes - Menu separator appearing on next line

admin管理员组

文章数量:1297015

I am creating a new theme, but for some reason the menu isn't displaying correctly. I want the separator to appear next to the menu items, but they are on the next line for some reason. This is what I am getting:

This is what I get when I inspect the element:

Here is the code to display the menu:

<nav class="navbar navbar-default navbar-eaglesnest">                   
    <?php 
        wp_nav_menu(array(
            'theme_locatiion' => 'primary',
            'container' => FALSE,
            'menu_class' => 'nav navbar-nav',
            'after' => '<font size=5px color=white>|</font>',
        )); 
    ?>
</nav>

And here's the css:

.navbar-default {
    position: absolute;
    background-color: transparent;
    margin: 0px;
    padding: 0px;
    top: 30px;
    right: 20px;
    z-index: 1;
    border: 0px;
}

.navbar-default ul, .navbar-default li {
    display: inline-block;
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}

.navbar-default ul a {
    padding: 0 20px 0 20px;
    line-height: 50px;
    text-decoration: none;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
}

.navbar-default ul a:hover {
    color: blue !important;
}

.navbar nav ul li.current-menu-item > a:link,
.navbar nav ul li.current-menu-item > a:visited,
.navbar nav ul li.current-page_ancester > a:link,
.navbar nav ul li.current-page_ancester > a:visited {
    text-decoration: underline !important;
}

Any help or suggestions are appreciated.

I am creating a new theme, but for some reason the menu isn't displaying correctly. I want the separator to appear next to the menu items, but they are on the next line for some reason. This is what I am getting:

This is what I get when I inspect the element:

Here is the code to display the menu:

<nav class="navbar navbar-default navbar-eaglesnest">                   
    <?php 
        wp_nav_menu(array(
            'theme_locatiion' => 'primary',
            'container' => FALSE,
            'menu_class' => 'nav navbar-nav',
            'after' => '<font size=5px color=white>|</font>',
        )); 
    ?>
</nav>

And here's the css:

.navbar-default {
    position: absolute;
    background-color: transparent;
    margin: 0px;
    padding: 0px;
    top: 30px;
    right: 20px;
    z-index: 1;
    border: 0px;
}

.navbar-default ul, .navbar-default li {
    display: inline-block;
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}

.navbar-default ul a {
    padding: 0 20px 0 20px;
    line-height: 50px;
    text-decoration: none;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
}

.navbar-default ul a:hover {
    color: blue !important;
}

.navbar nav ul li.current-menu-item > a:link,
.navbar nav ul li.current-menu-item > a:visited,
.navbar nav ul li.current-page_ancester > a:link,
.navbar nav ul li.current-page_ancester > a:visited {
    text-decoration: underline !important;
}

Any help or suggestions are appreciated.

• menus
• themes

Share Improve this question asked Apr 7, 2021 at 18:11 Darth Mikey DDarth Mikey D 9311 silver badge99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Try doing

.navbar-default ul, .navbar-default li {
    display: flex;
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}

You may need to style the spacing a bit differently but this should make them display in one line

本文标签： themesMenu separator appearing on next line