Menubar not expanding to full width – HTML CSS

I’m having a problem in which my navbar is not expanding to the full length it should. Below is my CSS code and HTML/PHP.

CSS

/* Header Layout */

.site-header {
    display: table;
    padding: 0;
}

.site-branding{
    width: auto;
    margin: 0; padding: 0;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#submenu > ul > li{
    padding: 0;
    margin: 0 3% 0 3%;
    font-size: 16px
    list-style: none;
    display: inline;
    float: left;
}

#submenu > ul {
    float: left;
}

#submenu > ul > li > a{
    text-decorations: none;
    display: inline-block;
    color: #FFF;
}

#submenu > ul > li > a:hover {
    color: #FFF;
}


.mainmenu {
    width: 750px;
    margin: 0; padding: 0;
    padding-left: .5em;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.header-social {
    margin: 0; padding: 0;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.header-social > img {
    margin: 0; padding: 0;
    height: 25px;
}

PHP

<header id="masthead" class="site-header container-fluid" role="banner">
    <div class="site-branding">

    <?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
            <h1 class="site-title logo"><a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>" relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a></h1>
    <?php } else { ?>
            <h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <?php } ?>


    </div>

    <div class="mainmenu" >
        <div class="mobilenavi row col-12" style="width:100%;"></div>
        <?php wp_nav_menu( array( 'container_id' => 'submenu',  'theme_location' => 'primary','container_class' => 'topmenu','menu_id'=>'topmenu' ,'menu_class'=>'sfmenu' ) ); ?>
    </div>

    <span class="header-social">
        <!-- SOCIAL MEDIA ICONS -->
            <img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/facebook.png' ">
            <img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/instagram.png' ">
            <img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/pinterest.png' ">
            <img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/twitter.png' ">
            <img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/youtube.png' ">
            <img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/email.png' ">

        </span>
    </div>

</header><!-- #masthead -->

Read More

By the way, I’m using wordpress, so the menu is populated through wordpress and not html. Here is a screen capture of what is happening.

Related posts

2 comments

  1. You’re expanding “mobilenavi row col-12” to 100% the width of “mainmenu”, correct? – If so this is only 750px.

    If you want to expand it past this width add to:

    .mobilenavi row col-12{
    position: absolute;
    }
    

    Is this what you meant?

  2. It looks like .mobilenavi row col-12 is intended for mobile only use judging by the name, but the size is being restricted by the maximum width of mainmenu (750px) and it seems a fairly large maximum for mobiles or tablets only. Media queries can be added to the CSS to so that different screensizes can be catered for, and the width of mainmenu can be different for different screensizes, or you can set mainmenu‘s width to 100%.

    Add this to the end of your CSS if you want to use different widths for different screensizes:

    @media only screen and (max-device-width: 750px) {
     mainmenu { width: 750px} 
    }
    @media only screen and (max-device-width: 400px) {
     mainmenu { width: 400px} 
    }
    @media only screen and (min-device-width: 751px) {
     mainmenu { width: 1200px} 
    }
    

Comments are closed.