Menubar не расширяется до полной ширины - HTML CSS

Question

У меня проблема, в которой мой навигатор не расширяется до полной длины. Ниже приведен мой CSS-код и 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 --> 

Кстати, я использую WordPress, поэтому меню заполняется через WordPress, а не HTML. Here is a screen capture of what is happening.

Answer 1

Вы расширяете «mobilenavi row col-12» до 100% ширины «mainmenu», правильно? - Если это так, то это всего лишь 750 пикселей.

Если вы хотите, чтобы развернуть его мимо этой ширины добавить:

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

Это то, что вы имели в виду?

Answer 2

Похоже .mobilenavi row col-12 предназначен для мобильных устройств использовать только судя по названию, но размер ограничивается максимальной шириной mainmenu (750px) и, кажется, довольно большой максимум для только мобильных или таблетки. Запросы СМИ могут быть добавлены в CSS так, чтобы можно было использовать различные экраны, а ширина mainmenu может отличаться для разных экранов, или вы можете установить ширину mainmenu на 100%.

Добавьте это к концу вашего CSS, если вы хотите использовать различные ширины для различных 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} 
}