Alright so I gave up on getting bootstrap menu to work and am now trying to get the wordpress menu to work. Just having one problem - it works fine on the first (home) page but everywhere else it seems to be transparent. I want it to be fixed at the top but the content is still at the top. Not sure what I am doing wrong. Any help would be appreciated. I took a screenshot of it as well.
header.php code:
<!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>
The front-page.php seems to be working since it is the only one displaying the navigation right:
<?php get_header();?>
<section class="page-wrap">
<div class="container">
<h1><?php the_title();?></h1>
<?php get_template_part('includes/section','content');?>
<?php get_search_form();?>
</div>
</section>
<?php get_footer();?>
page.php
<?php get_header();?>
<section class="page-wrap">
<div class="container">
<section class="row">
<div class="col-lg-3">
<?php if( is_active_sidebar('page-sidebar') ):?>
<?php dynamic_sidebar('page-sidebar');?>
<?php endif;?>
</div>
<div class="col-lg-9">
<h1><?php the_title();?></h1>
<?php if(has_post_thumbnail()):?>
<img src="<?php the_post_thumbnail_url('blog-large');?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail">
<?php endif;?>
<?php get_template_part('includes/section','content');?>
</div>
</section>
</div>
</section>
<?php get_footer();?>
and my main.css CSS file:
header {
background:white;
width:100%;
height:120px;
position:fixed;
}
.widget {
list-style-type:none;
margin:0;
padding:0;
}
.page-wrap {
padding:2rem 0;
}
li.current_page_item a{
text-decoration: none;
border-bottom: 5px solid #FC2828;
color:#FC2828 !important;
}
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:black;
}
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%;
}
.enquiry_form .gform_button {
width:100% !important;
background:green !important;
color:#fff !important;
display:block !important;
border:0 !important;
padding:1rem !important;
}
.enquiry_form .gform_footer {
margin:0 !important;
}
.enquiry_form input {
width:100% !important;
}
.enquiry_form .gform_confirmation_message {
font-size:2rem;
text-align:center;
line-height:1.3em;
}
.enquiry_form li.gfield {
padding-right: 0 !important;
}
There are other files so let me know if those may be needed.
Thanks!