Hello! I hope I’m in the right place. This regards wordpress, bootstrap and mainly CSS.
So this is hard for me even to explain but I will try:
I followed this guys tutorial on making a wordpress theme from scratch, https://www.youtube.com/playlist?list=PLgFB6lmeXFOpHnNmQ4fdIYA5X_9XhjJ9d
all good until I got to using bootstrap for the menu instead of default wordpress.
So I am using this “walker” which overrides wordpress’ default menu to get it to use bootstrap’s. https://github.com/wp-bootstrap/wp-bootstrap-navwalker
I get it all set up how (i think) it should be and now I cannot style the bar and there are 2 menus not 1 at the top. I only have one menu created in wordpress. How do I get the wordpress menu off and keep the bootstrap menu?
Also in the header.php code for the area of code there must be a way to use a CSS selector to change the way the bootstrap menu looks. Right now (i think) because of the bootstrap I cannot edit the look of anything by using my main.css CSS file. Would it be something like:
header .navbar-nav {
background-color: red;
}
I may have messed something up because my main.css file’s CSS doesn’t seem to be working. My only theory is that the bootstrap walker code is preventing it somehow.
Not really sure what files I need to include with this post either, but these are the ones I’m working with now:
functions.php
<?php
// Load stylesheets
function load_css()
{
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', [], false, 'all');
wp_enqueue_style('bootstrap');
//make sure this is after bootstrap styles
wp_register_style('main', get_template_directory_uri() . '/css/main.css', [], false, 'all');
wp_enqueue_style('main');
}
add_action('wp_enqueue_scripts', 'load_css');
//Load javascript
function load_js()
{
wp_enqueue_script('jquery');
wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'load_js');
//Theme options
add_theme_support('menus');
//Menus
register_nav_menus([
'top-menu' => 'Top Menu Location',
'mobile-menu' => 'Mobile Menu Location',
'footer-menu' => 'Footer Menu Location',
]);
/**
* Register Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<?php wp_head();?>
</head>
<body>
<header>
<div class="container">
<?php
wp_nav_menu(
array(
'theme_location' => 'top-menu',
//'menu' => 'Top Bar'
'menu_class' => 'top-bar'
)
);
?>
</div>
</header>
<nav class="navbar navbar-expand-md fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu( array(
'theme_location' => 'top-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</nav>
main.css
header {
background:#FF0000;
width:100%;
height:100px;
}
.page-wrap {
padding:2rem 0;
}
header .top-bar {
list-style-type:none;
margin:0;
padding:0;
display:flex;
}
header .container {
display:flex;
justify-content: center;
align-items:center;
height:100%;
}
header .top-bar li a {
padding:.25rem 1rem;
color:#fff;
}
header .top-bar li {
position:relative;
}
header .top-bar li:first-child a {
padding-left:0;
}
header .top-bar li:last-child a {
padding-right:0;
}
header .top-bar li .sub-menu {
display:none;
position:absolute;
z-index:999;
top:100%;
left:0;
background:#fff;
box-shadow:1px 1px 10px rgba(0,0,0,0.1);
margin:0;
padding:0;
list-style-type:none;
width:200px;
border-radius:.5rem;
}
header .top-bar li .sub-menu a {
color:red;
padding:.25rem;
text-align:center;
display:block;
text-decoration:none;
}
header .top-bar li .sub-menu a:hover {
color:black;
}
header .top-bar > .menu-item-has-children:hover > .sub-menu{
display:block;
}
header .top-bar .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
display:block;
}
header .top-bar .sub-menu li .sub-menu {
top:0;
left:100%;
}
header .nav .navbar-nav {
background-color:#FF0000;
}
Thank you! This is getting kind of complicated for me and any help is appreciated!
