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 (https://github.com/wp-bootstrap/wp-bootstrap-navwalker) as the fallback for my display.

Here is what I currently have:
enter image description here

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

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>
            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(),
            ) );

  • use a media call in css and align right if it's above your responsive breakpoint. – rudtek Dec 7 '18 at 17:38
  • That makes so much sense! Completely forgot all about that! – SLE Dec 7 '18 at 17:42
  • if you can provide a link I can give you exactly what you need, or at least the HTML output and css. – RiddleMeThis Dec 7 '18 at 18:39
  • Thanks for the help RiddleMeThis, I was able to add a native .ml-auto class to boostrap to make it workout. – SLE Dec 7 '18 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.