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

菜单栏未扩展到全宽 - HTML CSS

CSS

PHP

2 个答案: