I am learning to build wordpress themes. i have created a static html website. now I am trying to convert it into a wordpress theme. First, i need to convert the static navbar into a dynamic one. The following is my header.php code:
<!-- NAVIGATION -->
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'collapse navbar-collapse navigation',
'menu_class' => 'nav navbar-nav'
)
);
?>
</div>
<!-- .col-sm-8 -->
<div class="col-sm-4 navigation" id="social-icons">
<ul>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- row -->
</div>
<!-- .container -->
</nav>
<!-- .navbar -->
But the output of this is:
Whereas the static one looks like:
JS Fiddle for the Static website: https://jsfiddle.net/9yyrnmuy/7/
EDIT 1:
I inspected to check whether the classes are being over ridden and found the following syntax:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="nav navbar-nav">
<ul>
<li class="page_item page-item-7 current_page_item">
<a>Home</a></li>
</ul>
</nav>
</div>
<!-- .col-sm-8 -->
whereas I want it to be:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>About</li>
<li>Contact Me</li>
</ul>
<!-- .navbar-nav -->
</nav>
<!-- #navbar-collapse -->
</div>
<!-- .col-sm-8 -->
Can anyone please help to solve this issue? Any help will be appreciated.
Related
For some reason, my mobile menu is not working. Here is the code:
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
Thank you so much for taking the time to read this post!
if you used bootstrap 4.6 or some lower version chenge the jquery version and after that chenge the your jquery place in your end of your body for example
<script src="....................."></script>
<script src="....................."></script>
<script src="your jquery"></script>
now cheng the place
<script src="your jquery"></script>
<script src="....................."></script>
<script src="....................."></script>
At the moment i am converting my HTML to Wordpress. No matter what i try i can't seem to get my menu look the same in
Wordpress as it does in HTML. The CSS is correct (did allot of troubleshooting to root that out). This is the HTML:
<div class="navbar-wrapper">
<div class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="assets/img/Logo%20BY.png" alt="Logo" height="75" width="75"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Onze diensten</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
And this is the Wordpress way i am trying to implement:
<div class="navbar-wrapper">
<div class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo%20BY.png" alt="Logo" height="75" width="75">
</a>
</div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-right'
));
?>
</div>
</div>
</div>
Thanks in advance for the help!
I suspect you are missing the container div. Right click and inspect on the badly formatted menu and see if the (container) div is there
<div class="navbar-collapse collapse">
You have
'container' => 'nav'
should be
'container' => 'div'
I have the following bootstrap navbar. I want to include nav.php into all of my php pages. Well I have done simple includes in the past but with div tags something tells me I am doing this wrong.
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" alt=" "></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php include 'nav.php';?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My nav.php is as following
echo'
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>TEAM</li>
<li class="dropdown">
SERVICES <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>IT SERVICES</li>
<li>VOICE SERVICES</li>
</li>
</ul>
</li>
<li>CAREERS</li>
<li>INTERESTING INFORMATION</li>
<li>CONTACT</li>
</ul>';
Two possible paths:
Add <?php tag to your nav.php file,
or
remove echo statement and make the file plain HTML.
A drop-down menu I created with Twitter Bootstrap works on HTML documents but will not drop down on PHP documents. Here is a PHP document where you can see see what I mean. When I click the "more" tab, it does not drop down.
Why doesn't this menu work on both HTML and PHP documents?
Here is the page source:
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href"" class="navbar-brand">Colorful Cards</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="">Past Cards</li>
<li class="active">Contact</li>
<li class="dropdown">
More<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="inverse-dropdown">Bibliography</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">About</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">Coming Soon...</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I need a little help with my code. I'm using bootstrap and i have 3 links for now and i want them to be active as i click on them. I tried many ways to do that but i failed.
Here is my code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">POSLOVNA STATISTIKA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Poslovni korisnici <span class="sr-only">(current)</span></li>
<li>Korisnici</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<ul class="nav navbar-nav">
<li <?php if(isset($_GET['poslovni_korisnici'])){ echo 'class="active"'; } ?>>Poslovni korisnici <span class="sr-only">(current)</span></li>
<li <?php if(isset($_GET['korisnici'])){ echo 'class="active"'; } ?>Korisnici</li>
</ul>