Wordpress/Bootstrap navbar problems

HTML-CSS
1

Hello! So I am missing something with my navbar. It’s hard to put the code and everything on codepen because this is a wordpress site. It seems like the objects (content like navigation, brand image and address) are overlapping or something when resized. Really not sure what I am doing wrong tbh. Here is the relevant code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Aikido Dojo</title>

	<?php wp_head();?>
    
</head>
<body>


<header>
        <section>
            <div class="container-fluid" id="top-menu">
                <div class="row">
                    <div class="col-sm-4">
                    <a class="navbar-brand" href="#"> <img src="https://i.ibb.co/h7fNjkk/aiki-Concepts-Logo.jpg" alt="aiki-Concepts-Logo"  width="200" height="100"></a>


                    </div>
                    <div class="col-sm-4">
                    <nav class="navbar fixed-top navbar-expand-md navbar-light" 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> 
  
        <?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>
                    </div>
                    <div class="col-sm-4">

                        <div class="float-right">
                            <h4>58 Street - Indianapolis, IN</a></h4>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </header>

Not sure how else to do it. I want fixed-top and/or sticky, 3 rows with logo on far right, navigation in middle, and address on right.

Any input would be great!

Thanks!

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.