php - Menu to the right of screen on desktop using Bootstrap 4

admin管理员组

文章数量:1130349

I'm fairly new to WordPress development and would love to learn as much as possible. I am building a theme from scratch and using the wp-bootstrap-navwalker () as the fallback for my display.

Here is what I currently have:

How do I move the menu choices to the right of the screen with affecting the mobile version as shown below?

I would like to keep the mobile version the same, but just have the desktop version move to the right - I've tried applying different attributes that make it go to the right, but then the mobile version doesn't work.

Here is the code: header.php

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <?php
            wp_nav_menu( array(
                'theme_location'  => 'header-menu',
                'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
                'container'       => 'div',
                'container_class' => 'collapse navbar-collapse',
                'container_id'    => 'bs-example-navbar-collapse-1',
                'menu_class'      => 'navbar-nav mr-auto',
                'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                'walker'          => new WP_Bootstrap_Navwalker(),
            ) );
        ?>
</div>

I'm fairly new to WordPress development and would love to learn as much as possible. I am building a theme from scratch and using the wp-bootstrap-navwalker () as the fallback for my display.

Here is what I currently have:

How do I move the menu choices to the right of the screen with affecting the mobile version as shown below?

I would like to keep the mobile version the same, but just have the desktop version move to the right - I've tried applying different attributes that make it go to the right, but then the mobile version doesn't work.

Here is the code: header.php

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <?php
            wp_nav_menu( array(
                'theme_location'  => 'header-menu',
                'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
                'container'       => 'div',
                'container_class' => 'collapse navbar-collapse',
                'container_id'    => 'bs-example-navbar-collapse-1',
                'menu_class'      => 'navbar-nav mr-auto',
                'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                'walker'          => new WP_Bootstrap_Navwalker(),
            ) );
        ?>
</div>

本文标签： phpMenu to the right of screen on desktop using Bootstrap 4