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 -->
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.
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:
Is this what you meant?
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 ofmainmenu
(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 ofmainmenu
can be different for different screensizes, or you can setmainmenu
‘s width to 100%.Add this to the end of your CSS if you want to use different widths for different screensizes: