Ссылки в главном меню WordPress имеют маркеры и не горизонтальны

Question

Как сказано в заголовке, я не могу понять, почему ссылки в моем главном меню на моем локальном сайте WordPress расположены вертикально с маркерами. Подскажите, пожалуйста, как избавиться от маркеров и заставить их загружаться горизонтально, как и положено?

Посмотрите скриншот здесь: https://pasteboard.co/J7zvpjH.png

Код CSS для меню:

    /*--------------------------------------------------------------
    ## Menus
    --------------------------------------------------------------*/

    /* Small menu. */
    .menu-toggle,
    .main-navigation.toggled ul {
        display: none;
    }

    @media screen and (min-width: 37.5em) {

        .menu-toggle {
            display: none;
        }

        .main-navigation ul {
            display: flex;
        }
    }

    .site-main .comment-navigation,
    .site-main
    .posts-navigation,
    .site-main
    .post-navigation {
        margin: 0 0 1.5em;
    }

    .comment-navigation .nav-links,
    .posts-navigation .nav-links,
    .post-navigation .nav-links {
        display: flex;
    }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
        flex: 1 0 50%;
    }

    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        text-align: end;
        flex: 1 0 50%;
    }

    <header class="site-header" role="banner">

                <!-- NAVBAR -->
                <div class="navbar-wrapper">

                    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="/"><img src="assets/img/logo.png" alt="Bootstrap To WordPress"></a>
                            </div><!-- navbar-header -->
                            <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li class="active"><a href="/">Home</a></li>
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="resources.html">Resources</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                </ul><!-- nav -->
                            </div><!-- navbar-collapse -->
                        </div><!-- container -->

                    </div><!-- navbar -->

                </div><!-- navbar-wrapper -->

            </header>

    <header class="site-header" role="banner">

                <!-- NAVBAR -->
                <div class="navbar-wrapper">

                    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </button>

                                <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo.png" alt="Bootstrap To WordPress"></a>
                            </div><!-- navbar-header -->

                            <!-- If the menu (WP admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container_class". Ref: https://wordpress.org/support/topic/wp_nav_menu-menu_class-usage-bug/?replies=4 -->

                            <?php // Added this PHP script to my Bootstrap to Wordpress theme's code
                                    wp_nav_menu( array(

                                        'theme_location'   => 'primary',
                                        'container'        => 'nav',
                                        'container_class'  => 'navbar-collapse collapse',
                                        'menu_class'       => 'nav navbar-nav navbar-right'

                                    ) );
                                ?>

                        </div><!-- container -->

                    </div><!-- navbar -->

                </div><!-- navbar-wrapper -->

            </header>

    <header class="site-header" role="banner">

                <!-- NAVBAR -->
                <div class="navbar-wrapper">

                    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </button>

                                <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo.png" alt="Bootstrap To WordPress"></a>
                            </div><!-- navbar-header -->

                            <!-- If the menu (WP admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container_class". Ref: https://wordpress.org/support/topic/wp_nav_menu-menu_class-usage-bug/?replies=4 -->

                            <?php // Added this PHP script to my Bootstrap to Wordpress theme's code
                                    wp_nav_menu( array(

                                        'theme_location'   => 'primary',
                                        'container'        => 'nav',
                                        'container_class'  => 'navbar-collapse collapse main-navigation',
                                        'menu_class'       => 'nav navbar-nav navbar-right'

                                    ) );
                                ?>

                        </div><!-- container -->

                    </div><!-- navbar -->

                </div><!-- navbar-wrapper -->

            </header> 

Answer 1

Вы можете избавиться от маркеров, установив для "list-style-type" вашего элемента "ul" значение "none". Попробуйте установить для «flex-direction» значение «row» (это значение по умолчанию), чтобы убедиться, что оно не было где-то перезаписано. Вы можете использовать свойство «flex», чтобы установить гибкую длину гибких элементов.

.main-navigation ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
}
.main-navigation li {
    flex: auto;
}

Если это не работает для вас, не могли бы вы поделиться своей html разметкой списка? Может возникнуть проблема с доступом к нужным элементам в css, поэтому код не применяется к вашим элементам. Или есть классы или зависимости, которые влияют на поведение элементов вашего списка.

EDIT: Я только что проверил ваш новый добавленный html код, спасибо. Вы не передаете класс «main-navigation» родительскому элементу ul. Так что ваши стили css не применяются. Поэтому вам нужно добавить класс в контейнер div navbar-collapse.

<div class="navbar-collapse collapse main-navigation">
    <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="resources.html">Resources</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul><!-- nav -->
</div><!-- navbar-collapse -->

При использовании функции wp_nav_menu вы можете поместить класс в «container_class».

<?php
wp_nav_menu( array(

    'theme_location'   => 'primary',
    'container'        => 'nav',
    'container_class'  => 'navbar-collapse collapse main-navigation',
    'menu_class'       => 'nav navbar-nav navbar-right'

) );
?>

Вы вы можете получить доступ к вашему заголовку. php в Wordpress через FTP или, альтернативно, используя серверную часть, вы можете go в Дизайн -> Редактор тем -> и выбрать файл заголовка. php справа. Отредактируйте код и сохраните файл.