WordPress: Align 2 menus next to each other whilst being responsive

I have been trying to achieve the look of 2 navigations next to each other whilst also appearing either side of a logo image, the image is positioned absolute due to it also overlapping the header.

How the menu should look

How it currently looks

FYI Left and Right classes = float left/right dependent on the name

HTML/PHP

<?php // Navigation ?>
<div class="navigation-holder">       
<?php wp_nav_menu( 
    array(
        'container' => false,
        'theme_location' => 'primary-left',
        'menu_id' => 'nav-left',
        'items_wrap' => ' 
            <nav class="navbar right" role="navigation">
                 <div class="inner-container">
                    <div class="inside-nav">
                        <ul class="nav right">%3$s</ul>
                    </div>
                </div>
            </nav>'
        ) 
    ); 
?>
    <a href="/"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.jpg" class="company-logo"></a>
<?php wp_nav_menu( 
    array(
        'container' => false,
        'theme_location' => 'primary-right',
        'menu_id' => 'nav-right',
        'items_wrap' => ' 
            <nav class="navbar left" role="navigation">
                 <div class="inner-container">
                    <div class="inside-nav">
                        <ul class="nav left">%3$s</ul>
                    </div>
                </div>
            </nav>'
        ) 
    ); 
?>

SCSS

.header {
    background: #e3e5e4;
    padding-bottom: 8px;

    .inner-container {
        max-width: 1085px;

        .head-contact {
            padding: 15px 0px 15px 0;

            span {
                font-size: 31px;
                font-family: "Open Sans";
                font-weight: bold;
                line-height: 0.643;
                color: #5c1764;
            }

            p {
               font-size: 15px;
               font-family: "Arial";
               font-weight: bold;
               line-height: 1.125;
               color: #5c1764;
               padding: 16px 0 0 0;
            }
        }
    }
}

.company-logo {
    position: absolute;
    top: 0;
    left: 40.5%;
}

.navigation-holder {
    overflow: hidden;
    background: #7f8a93;

    .navbar {
         background: #7f8a93;

        a {
            color: $white;
            font-weight: bold;
            font-size: 20px;
            line-height: 18px;
            font-family: "Open Sans";
            text-shadow: 0.5px 0.866px 0px rgba(1, 1, 1, 0.75);
        }
    }
}

Read more here: WordPress: Align 2 menus next to each other whilst being responsive

Leave a Reply

Your email address will not be published. Required fields are marked *