How to change bootstrap in wordpress? - wordpress

Question

I am using this code to make a nav menu bar. As you can see the menu items are too close and it doesnt change the background color when hover. I want to edit the css for those items. What do I need to write in design.css ? Thankyou
header.php
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-dark">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand text-white" href="#" style="margin-left: 50px;">Web</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<?php wp_nav_menu(array('theme_location'=>'primary', 'container'=>false, 'menu_class'=>'nav navbar-nav ml-auto','item_spacing'=>'preserve' )); ?>
<button class="btn btn-primary navbar-btn navbar-right" style="margin-left: 10px;">Login</button>
<button class="btn btn-default navbar-btn navbar-right" >Register</button>
</div>
</div>
</nav>
</div>
</div>
functions.php
//css
wp_enqueue_style('bootstrap', get_template_directory_uri().'/bootstrap/css/bootstrap.min.css', array(), '4.1.3', 'all');
wp_enqueue_style('customstyle', get_template_directory_uri().'/css/design.css', array('bootstrap'), '0.0.1', 'null');
//js
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrapjs',get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', array(), '4.1.3', true);
wp_enqueue_script('customjs', get_template_directory_uri().'/js/code.js', array(), '1.0.0', true);
I tried this in design.css
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}

Answer 1

I fixed it. I changed CSS Classes in Appearance, menus to navbar-default then this:
wp_enqueue_style('customstyle', get_template_directory_uri().'/css/design.css', array(), '1.0.0', 'all');
.navbar-default a:hover {
background: #222;
color: #ffffff;
}