How do I fix these 3 issues facing my bootstrap navigation bar:
Menu cannot collapse properly when resized (window made smaller)
Have the icons beside the menu links instead of below them
Have the sign up/login button link to another page when the window is resized
Here is a demo:
https://jsfiddle.net/whywymam/zpdpsuLn/
HTML Code:
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<navbar>
<div class="upperRow">
<div class="navbar-header">
<img src="image/logo.png" class="img-responsive">
</div>
<div id="btnTopInline">
<ul class="nav navbar-nav navbar-right imgicon hidden-xs">
<li>
<div class="indivColl">
<a href="signupLogin.php">
<img src="image/jobseekerlogo.png" class="indi">
<p class="indit">Job Seeker</p>
</a>
</div>
</li>
<li>
<div id="empColl">
<a href="signupLoginEmp.php">
<img src="image/employerlogo.png" class="emp">
<p class="empt">Employer</p>
</a>
</div>
</li>
</ul>
</div>
<!-- for tablet and mobile view-->
<button type="button" class="btn btn-login pull-right visible-xs">
<a href="signupLoginEmp.php">
Employer<br>Log In
</a>
</button>
<button type="button" class="btn btn-login pull-right visible-xs">
<a href="signupLogin.php">
Job Seeker<br>Log In
</a>
</button>
</div>
<div class="middleRow">
<div class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-collapse collapse-in" id="nav-collapse">
<ul class="nav navbar-nav center-block">
<li>Home<img src="image/home.png" width="75" height="65" alt="" title="" /></li>
<li>About<img src="image/about.png" width="75" height="65" alt="" title="" /></li>
<li>Prove Job<img src="image/PYW.png" width="75" height="65" alt="" title="" /></li>
<li>Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></li>
<li>Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></li>
</ul>
</div>
</div> <!-- end inner navbar -->
</div> <!-- end middle row -->
</navbar>
</div> <!-- end col-lg-12 col-md-12 col-sm-12 col-xs-12 -->
</div><!-- end container -->
CSS:
.img-responsive {
max-width: 60%;
margin-bottom: 15%;
padding-top: -3%;
}
.imgicon {
padding-left: 50%;
margin-top: -2%;
}
.middleRow{
padding-top: 10%;
margin-top: 5%;
}
.navcolor{
background-color: transparent;
}
.navbar-default {
margin-top: 3%;
}
.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
text-align: center;
}
#btnTopInline{
display: inline-block;
float: right;
clear: none;
}
#media(min-width:768px) {
.nav-collapse{
display: inline;
}
}
Thank you in advance :)
Here is code i have made some modification in html and css
for the toggal button to work use data-target=".nav-collapse" insted of data-target=".navbar-collapse"
for icons beside the menu links add img tag inside ancor tag.
below are changes
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<img src="image/logo.png" class="img-responsive">
</div>
<ul class="nav navbar-nav navbar-right imgicon hidden-xs">
<div id="indivColl">
<a href="signupLogin.php">
<img src="image/jobseekerlogo.png" class="indi">
<p class="indit">Job Seeker</p>
</a>
</div>
<div id="empColl">
<a href="signupLoginEmp.php">
<img src="image/employerlogo.png" class="emp">
<p class="empt">Employer</p>
</a>
</div>
</ul>
<!-- for tablet and mobile view-->
<button type="submit" id="btn-login-header" class="btn btn-login pull-right visible-xs mobile-login"
id="header-mobile-login-button" data-target="#indivColl">
Employer<br>Log In
</button>
<button type="submit" id="btn-login-header" class="btn btn-login pull-right visible-xs mobile-login"
id="header-mobile-login-button" data-target="#empColl">
Job Seeker<br>Log In
</button>
<button type="button" class="navbar-toggle btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse in" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home<img src="image/home.png" width="75" height="65" alt="" title="" /></li>
<li>About<img src="image/about.png" width="75" height="65" alt="" title="" /></li>
<li>Prove Your Worth<img src="image/PYW.png" width="75" height="65" alt="" title="" /></li>
<li>Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></li>
<li>Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></li>
</ul>
</div>
</div>
</div>
</div>
</body>
add this in css
#media(min-width:768px) {
.nav-collapse{
display: block;
}
}
First: For the responsive layout work the bootstrap need to work with rows and columns. You need to put the navbar inside.
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<navbar>
</navbar>
</div>
</div>
Second: I don't test, but i think which inside the li of navbar you need to create a div with class containing text-align: center; or put this class in the li. Inside the div put the text and icon, each one with a class, containing float: left and clear: both.
<ul class="nav navbar-nav navbar-right imgicon hidden-xs">
<div id="indivColl">
<img src="image/jobseekerlogo.png" class="indi"><p class="indit">Job Seeker</p>
</div>
<div id="empColl">
<img src="image/employerlogo.png" class="emp"><p class="empt">Employer</p>
</div>
</ul>
Above you need to put each div inside a li. Insert the class in the img and trade the p tag to a span tag, after, add the same class to the span.
The example is a supposition, i don't test but you can search more about the float and clear in www.w3cschools.com
The logic of navbar in your code is totaly wrong. You have a navbar inside a navbar with two containers. You need to review the concepts of bootstrap, html and css dude! Compare this with yours:
<div class="navbar navbar-default navbar-static-top navcolor">
<div class="navbar-header">
<img src="image/logo.png" class="img-responsive">
</div>
<!-- for tablet and mobile view-->
<button type="submit" id="btn-login-header" class="btn btn-login pull-right navbar-btn visible-xs mobile-login" id="header-mobile-login-button" data-target="#indivColl"> Job Seeker Log In </button>
<button type="submit" id="btn-login-header" class="btn btn-login pull-right navbar-btn visible-xs mobile-login" id="header-mobile-login-button" data-target="#empColl"> Employer Log In </button>
<div class="navbar-header">
<!--button to appear when display is on mobile device-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home<img src="image/home.png" width="75" height="65" alt="" title="" /></li>
<li>About<img src="image/about.png" width="75" height="65" alt="" title="" /></li>
<li>Prove Your Worth<img src="image/PYW.png" width="75" height="65" alt="" title="" /></li>
<li>Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></li>
<li>Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></li>
<li class="imgicon hidden-xs">
<div id="indivColl">
<img src="image/jobseekerlogo.png" class="indi"><p class="indit">Job Seeker</p>
</div>
</li>
<li class="imgicon hidden-xs">
<div id="empColl">
<img src="image/employerlogo.png" class="emp"><p class="empt">Employer</p>
</div>
</li>
</ul>
</div>
I doesnt enter in details with css or the completely bootstrap rules but i think this code can useful for you. And doesnt forgot the classes with float and clear ^^
This will be a way to do. Bye, like my answer if served !
Related
After checking my code through a validator, the validator error states that on the
div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000"
Element div not allowed as child of element a in this context. (Suppressing further errors from this subtree.)
The rest of the code is the page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=dvice=width, initial-scale=1">
<meta name="keywords" content="Contect Free Art, Design, Grammer">
<meta name="description" content="Art Created with CDFG">
<meta name="author" content="Dakotah Hutchinson">
<title> O'sullivan Clemens</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIIj8LyTjo7mOUStjskKC4pOpQbyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/CDFG.css" rel="stylesheet">
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
</head><body>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1> O'sullivan Clemens </h1>
</div>
<div class="container">-
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Galleries... <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="guest_art.php">Guest Art
</a></li>
<li><a href="carousel.php">Carousel
</a></li>
<li><a href="contribute.php">Contribute Art
</a></li>
<!--links.php -->
</ul>
<li>Resources<b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="links.php">Suggest a Link
</a></li>
<li><a href="Location.php">Location
</a></li>
<li><a href="news.php">News
</a></li>
</ul>
<li>Contact... </li>
</ul>
</div>
</div>
</div>
Code block location
<div class="container">
<div class="main">
<h1> Lawyers <b> Slideshow </b> | <a href="lightbox.php"> Lightbox
<!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
<div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">
<div class='carousel-outer'>
<div class='carousel-inner'>
<div class="item active">
<img src="images/website1/carousel1.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel2.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel3.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel4.jpg" alt="">
</div>
</div>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Controls -->
</div>
<div class="indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-custom" data-slide-to="0"class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="1"class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="2"class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="3"class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
</ol>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<i class="fab fa-twitter" aria-hidden="true"></i>
</div>
<div class="navbar-text pull-right">
GTT 20XX (CC BY-NC-NC 4.0)
</div>
</div>
</div>
<!-- Video Sending Email - Form Reset -->
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contact" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1> Contact </h1>
<p><span class="error">* required field. </span></p>
<p>Either <a href="mailto:name#gmail.com">
email me</a> directly or fil in the form below...</p>
<p>
<b>Name<sup class="error">*</sup>:</b><br/>
<input type="text" name="name" size="25" value="" required />
</p>
<p>
<b>Email<sup class="error">*</sup>:</b><br/>
<input type="email" name="email" size="25" value="" required />
</p>
<p>
<b>Comment<sup class="error">*</sup>:</b><br/>
<textarea name="comment" required
></textarea>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" name="submit">Send</button>
<a class="btn btn-warning" data-dismiss="modal">Cancel</a>
</div>
</form>
</div>
</div>
</div>
You do not appear to have closed the 'a' tag on the previous line
<a href="lightbox.php"> Lightbox
Which makes the subsequent div a child of the 'a' tag which is not allowed in most circumstances.
It should probably be
Lightbox
Have a look at the following answer to see what you can and cannot do.
I also don't see where you have closed the <h1> tag on the same line. I know that many browsers are tolerant of unclosed tags but it's bad practice and can lead to unexpected results. If you use a code prettifier (such as the one embedded in editors like Sublime Text) you will see that the indent levels do not line up in your code. Adding the </h1> and </a> tags cures this and gives you
<div class="container">
<div class="main">
<h1> Lawyers</h1> <b> Slideshow </b> | Lightbox
<!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
<div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">
<div class='carousel-outer'>
<div class='carousel-inner'>
<div class="item active">
<img src="images/website1/carousel1.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel2.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel3.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel4.jpg" alt="">
</div>
</div>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Controls -->
</div>
<div class="indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-custom" data-slide-to="0" class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="1" class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="2" class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="3" class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
</ol>
</div>
</div>
</div>
</div>
for the first half of Code block location
How do I center list items on a container-fluid navigation? I have been jsfiddling with this for hours. I havent gotten anything that works properly. Looked over a ton of websites for answers.
<nav class="navbar navbar-info navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="hidden-xs" href="#">
<div class="logo-container">
<div><img src="assets/img/logo-header-optimized.svg" alt="" height="52" style="margin:10px 0px 10px 0px"></div>
</div>
</a> <a class="visible-xs navbar-brand"><img src="assets/img/phone-logo-header-optimized.svg" alt="" height="22"></a> </div>
<div>
<ul class="hidden-xs nav navbar-nav navbar-right" style="margin-top:10px">
<li>
<button type="button" class="btn btn-inverse navbar-btn btn-raised" onclick="window.open('')"><strong> BOOK NOW </strong></button>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-header">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Introduction <i class="material-icons"></i>
</li>
<li> Amenities <i class="material-icons"></i>
</li>
<li> Hospitality <i class="material-icons"></i>
</li>
<li> Information <i class="material-icons"></i>
</li>
</ul>
</div>
</div>
</div>
First: The div <div class="navbar-header"> should have a "witdh:100%".
Second: between insert a div with this style="width: 60%; margin: 0 auto;"
The width: 60% depending of elements
I tried the solution by Julian and it lowers the button on the left and I dont think he wants that. The two solutions that I have are to add one of 2 css styles.
First one .navbar-header {padding: 0 300px;} this will center the list items but will also move the image with it
Second one .navbar-nav {padding: 0 300px;} this will center the list items but will also bring the button closer to the middle but still in the same row as the image.
If you want to dig deeper, I recommend reading this
I am working on a bootstrap project and I have to create a navigation menu like this:
I used absolute position for it but it is not responsive when I scale it to smaller resolution (it becomes too small when I scale down). Is there any method to make a responsive navigation menu (like the image above)?
Here's my source:
<div id ="top" class="container">
<div class="top-menu row">
<ul class="top-menu-buttons col-lg-12 col-xs-12">
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-active">
<img class="img-responsive" src="img/home-bt-enable.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/deal-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/about-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/contact-bt.png">
</a>
</li>
</ul>
</div>
</div>
CSS:
.top-menu ul,
.top-menu li{
display: inline-block;
}
.top-menu{
padding-left: 170px;
padding-right: 170px;
padding-bottom: 0;
bottom: 0;
top:auto;
}
.top-menu-button{
display: inline-block;
position: absolute;
width: 100%;
}
.menu-bt-active{
top: 22px;
}
.menu-bt-inactive{
top: 37px;
}
<div class="nav navbar-default navbar-static-top">
<div class="container-fluid">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand collapse navbar-collapse navHeadCollapse">
<a href="#">
<img id="img_navbar" src="img/home-bt-enable.png">
</a>
<a href="#">
<img id="img_navbar" src="img/deal-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/about-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/contact-bt.png">
</a>
<div id="search"class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
Try this CSS
#img_navbar
{
margin-left: 3%;
float: left;
margin-bottom: 10;
width:3%;
height:3%;
}
#search
{
width:20%;float:right;
}
I'm using Bootstrap 3 on my site and the mobile navigation causes horizontal scrolling. Take a look: http://www.fastfoodnutrition.org/ If you make your browser small enough to show the mobile menu, when you expand it you'll see the horizontal scrollbar. I can't for the life of me figure out what is causing this. Any help would be greatly appreciated. Code is below:
<nav class="navbar navbar-default navtop" role="navigation">
<div class="container-fluid">
<div style="width:100%;">
<div class="navbar-brand visible-xs">
<a title="Fast Food Nutrition" href="/">
<img alt="Fast Food Nutrition" src="/images/logo.png">
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div style="clear:both;"></div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> <a title="Fast Food Restaurants" href="/fast-food-restaurants.php">Restaurants</a>
</li>
<li> <a title="Fast Food Nutrition Meal Calculator" href="/fast-food-meal-calculator.php">Meal Calculator</a>
</li>
<li> <a title="Fast Food Nutrition Blog" href="/blog/">Blog</a>
</li>
<li> <a title="Nutrition Glossary" href="/glossary/">Glossary</a>
</li>
<li> <a title="Fast Food Nutrition Lesson Plans" href="/lesson-plans.php">Teachers</a>
</li>
<li> <a title="About FastFoodNutrition.org" href="/about-us.php">About</a>
</li>
<li class="hidden-sm visible-xs"> <a title="Search FastFoodNutrition.org" href="/gsearch.php">Search</a>
</li>
</ul>
<div class="hidden-xs">
<form action="http://www.fastfoodnutrition.org/gsearch.php" id="cse-search-box">
<div id="desktopsearch">
<input type="hidden" name="cx" value="partner-pub-8872439879453765:6542173620" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="20" />
</div>
</form>
</div>
</div>
</div>
</nav>
Its because of padding :0; at line 15 in ffnv4.css
And add a media query so that it does alters your big screen view above 768px.
#media (min-width: 768px) {
#bs-example-navbar-collapse-1 {
padding: 0 15px;
}
}
The correct answer is here, bootstrap uses negative margins for navbar-nav elements.
I have the following code and the navbar stays full width regardless of screen size... good!
but the one below goes to width: 708 when it gets smaller and I just want it to also be 100%.
<div class="navbar navbar-static-top" id="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"><img style="height:20px; padding: 0px; margin: 0px;" src="<?php echo Site::$imageFolder; ?>logo.png" alt="logo" /></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right topRightIcons">
<li class="active"><i class="icon-user icon-white"></i></li>
<li><i class="icon-eject icon-white"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- THIS ONE HERE -->
<div class="row-fluid" id="topBar">
<div class="span12">
<p class="nav-text pull-right"><img src="http://placehold.it/15x15" alt="Your company logo"> Welcome ClientName</p>
</div>
</div>
#topBar is purely for colour, as is #navigation
You need to override the media query. Create a custom.css (any-name.css). Add this code inside it.
#media (max-width: 767px)
{
body {
padding-right: 0px;
padding-left: 0px;
}
}
Now it should stick container to browser width.
Important note - Never make any changes in existing stylesheet. Override it instead :-)