菜单栏未扩展到全宽- 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“扩展到"mainmenu”的100%宽度，对吗？-如果是这样的话，这只是750px。

如果要将其扩展到此宽度之外，请添加以下内容：

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

这就是你的意思吗？

Answer 2

从名字上看，.mobilenavi row col-12似乎只打算在手机上使用，但它的大小受到mainmenu最大宽度(750px)的限制，而且对于手机或平板电脑来说，这似乎是一个相当大的上限。可以将媒体查询添加到CSS中，以便迎合不同的屏幕大小，并且不同屏幕大小的mainmenu宽度可以不同，或者您可以将mainmenu的宽度设置为100%。

如果您想对不同的屏幕尺寸使用不同的宽度，请将此代码添加到CSS的末尾：

@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} 
}