So I've changed the css so that the navigation bar's height matches the logo's height. It works great but when I collapse it to mobile view, there is a line that's bothering me, look at the picture:
This is normal destop version:
This is collapsed mobile view:
This is collapsed mobile view when I press the burger menu. This is the problem, the grey line is out:
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
<!-- bg-warning = Pozadina zuta -->
</body>
</html>
This is my css:
.navbar-default .navbar-nav>li>a {
padding: 21px 15px 21px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 21px;
padding-top: 10px;
padding-bottom: 10px;}
}
#media (max-width: 767px) {
.navbar-default {
line-height: 21px;
padding-top: 0px;
padding-bottom: 11px;}
}
This is the solution:
Open bootstrap.min.css file
Search for this code:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px
}
Add height:150px to the end of the above code.
After adding the code it may like this:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px;
height:150px;
}
Then save and check again.
Related
I have seen several people describe similar problems but none of what I have seen or tried has fixed my issue. I am storing Font Awesome 5 files locally but when I try to add some icons they do not appear in the browser. I have tried several browsers and all have the same result. I suspect the error is in how I have my CSS files configured or I need to add another FA file to my local machine, but I have not been able to prove either of these hypothesis. The snippet below does not work because I am running xampp and storing the files locally so I am also attaching some images of the maximum window as well as smaller window.
Smaller Window:
Max Window:
File Location:
/*General Styles */
body {
font-family: "Roboto", Helvetica, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #f0f0f0;
overflow-x: hidden;
}
/*Top Navbar Styles*/
#top{
background: #555555;
padding: 10px 0;
}
#top.offer{
text-transform: uppercase;
color: #ffff;
}
#top.offer.btn{
text-transform: uppercase;
}
#media (max-width: 991px) {
#top.offer{
margin-bottom: 10px;
}
}
#media (max-width: 991px){
#top{
font-size: 12px;
text-align: center;
}
}
#top a {
color: #fff;
}
#top ul.menu{
padding-top: 5px;
margin: 0;
text-align: right;
font-size: 12px;
list-style: none;
}
#media (max-width: 991px){
#top ul.menu{
text-align: center;
}
}
#top ul.menu > li{
display: inline-block;
}
#top ul.menu > li a{
color: #eeeeee;
}
#top ul.menu > li + li:before{
content: "|\00a0";
padding: 0 5px;
color: #f7f7f7;
}
<!DOCTYPE html>
<html>
<head>
<title>E Commerce Store</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet">
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
<link href="font-awesome/css/fontawesome.min.css" rel="stylesheet">
</head>
<body>
<div id="top"><!--top start -->
<div class="container"><!-- container start -->
<div class="col-md-6 offer"><!-- col md-6 offer start -->
Welcome : Guest
<a href="#" >Shopping Cart Total Price: $100, Total Items 2 </a>
</div><!-- col md-6 offer end -->
<div class="col-md-6"><!-- col md-6 start -->
<ul class="menu"><!-- menu start -->
<li>Register</li>
<li>My Account</li>
<li>Go to Cart</li>
<li>Login</li>
</ul><!-- menu end -->
</div><!-- col md-6 end -->
</div><!-- container end -->
</div> <!-- top end -->
<div class="navbar navbar-default" id="navbar"><!-- navbar navbar-default start -->
<div class="container"><!-- container start -->
<div class="navbar-header"><!-- navbar-header start -->
<a class="navbar-brand home" href="index.php">
<img src="images/logo.png" alt="company logo" class="hidden-xs">
<img src="images/logo-small.png" alt="company logo" class="visible-xs">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span><i class="fas fa-align-justify"></i>
</button>
<button type="button" class="navbar-toggle" data-toggle="navbar-toggle" data-target="#search">
<span class="sr-only">Toggle Search</span><i class="fas fa-search"></i>
</button>
</div><!-- navbar-header end -->
<div class="navbar-collapse collapse" id="navigation"><!-- navbar-collapse collapse start -->
<div class="padding-nav" ><!-- padding-nav start -->
<ul class="nav navbar-nav navbar-left"><!-- nav navbar-nav navbar-left start -->
<li class="active">Home</li>
<li>Shop</li>
<li>My Account</li>
<li>Shopping Cart</li>
<li>Contact Us</li>
</ul><!-- nav navbar-nav navbar-left start -->
</div><!-- padding-nav end -->
<a class="btn btn-primary navbar-btn right" href="cart.php"><i class="fas fa-shopping-cart"></i><span>4 items in cart</span></a>
<div class="navbar-collapse collapse right"><!-- navbar-collapse collapse right start -->
<button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search"><span class="sr-only">Toggle Search</span><i class="fas fa-search"></i></button>
</div><!-- navbar-collapse collapse right end -->
</div><!-- navbar-collapse collapse end -->
</div><!-- container end -->
</div><!-- navbar navbar-default end -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When using fontawesome.min.css via CDN none of your icons render. When using all.min.css they all do.
Tested with "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css" and "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
Working fiddle
Non-working fiddle
I have been learning HTML/CSS/Bootstrap for around a week now and I'm just start a portfolio website as a sort of a test as to what I am able to do so far. Currently, I am having a problem creating the "about me" page responsive due to an image I have on that page.
Link to website is here http://moeminmamdouh.000webhostapp.com/aboutme.html
The desired outcome is to basically have everything centered, however, this is what shows up https://ibb.co/idEPVT
HERE IS THE CODEPEN LINK: https://codepen.io/muchkler/project/editor/AznjbN#
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="navbar-brand" href="index.html">Moemin Mamdouh</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Portfolio <span class="sr-only">(current)</span></li>
<li class="active">About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="images/rightprof.png" class="rightprof">
<div class="row">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing without a brand, and a brand requires a stable and responsive website. I will be providing designs in both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
<img src="images/behance.png" height="30px" width="30px" class="behance">
</div>
</div>
</body>
</html>
and this is the CSS code:
body{
background: url(images/tom-sini-710353-unsplash.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
.row{
color: white;
padding-top: 350px;
padding-left: 250px;
width: 900px;
}
.rightprof{
float: right;
padding-top: 250px;
padding-right: 250px;
}
.navbar-default{
background-color: #D91E18 !important;
border-style: none !important;
}
.navbar-brand{
color: white !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #CF000F !important;
}
#media only screen and (max-width: 992px){
.leftside{
padding: 300px;
}
}
#media only screen and (max-width: 992px){
.row{
text-align: center;
padding-right: 110px;
}
.rightprof{
}
}
#media only screen and (max-width: 1042px){
.row{
text-align: center;
}
#media only screen and (max-width: 768px){
.row{
font-size: 10px;
width: auto;
margin-right: 200px;
}
}
any help would be appreciated, thanks!
I suggest removing your about.css file. Learn the grid. Your code was missing '.container' around your '.row', and you were missing the column definition (.col-sm-8, .col-sm-4). Avoid adding CSS widths and floats to your images and content as it will blow up the responsive grid. Instead, add '.img-responsive' class to your images.
<!doctype html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body style="padding-top:70px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<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="navbar-brand" href="index.html">Moemin Mamdouh</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="portfolio.html">Portfolio
<span class="sr-only">(current)</span>
</a>
</li>
<li class="active">
About Me
</li>
<li>
Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing
without a brand, and a brand requires a stable and responsive website. I will be providing designs in
both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding
the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<a href="https://www.facebook.com/moemin.mamdouh.3">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
</a>
<a href="https://www.behance.net/Muchkler">
<img src="images/behance.png" height="30px" width="30px" class="behance"> </a>
</div>
</div>
<div class="col-sm-4">
<img src="images/rightprof.png" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
I am trying to get a full screen navigation overlay to work on iPad sizes etc. I'm using bootstrap 3, and what I want is when the user gets the burger menu, and they click it, it will cause a full screen overlay such as this example:
Here Link
I for some reason cant get it to work on my code and I am wondering if its because of my bootstrap classes or what?
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
I was wondering if anyone can help me get this to work when it goes to iPad sizes on 768 screens.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet">
<style>
.overlay {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse overlay" id="myNavbar">
×
<ul class="nav navbar-nav navbar-right overlay-content">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$("button").on("click", function () {
$("#myNavbar").css("height", "100%");
});
$("#myNavbar a").on("click", function () {
$("#myNavbar").css("height", "0%");
})
</script>
</body>
</html>
Try this saving as a HTML File and link bootstrap files properly. The thing you were missing was overlays. I used the same overlays from your link.
I've created a navbar with a logo but the logo is out of place (see image). I know how to shrink the image so it fits the navbar, but I want to increase the height of the navigation bar so that it matches the logo.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't have my custom CSS. Do I need to create it ? I'm new to bootstrap.
As simple as that: add this line near including boostrap.min.css
<link rel="stylesheet" href="css/style.css">
Create a new file named style.css in css folder, and add this lines in it.
.navbar-default .navbar-nav>li>a {
padding: 20px 15px 20px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
I've tested it and worked for me 100%.
Try it:-
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;}
}
This special code works for me with a similar problem with resizing navbar-inverse. I placed the code in my bootstrap custom CSS. You can change the padding to fit hover nav color blocks. For the image issues (site logo) you can add a style="margin-top/bottom, left, right: -12px or 12px" to the
Thanks
First Question
Bootstrap collapse not working when i check responsive...but when i resize my browser it works but still there is a prblem i dont want it to collapsed next to navbar brand...it must be under it
collapseImg
<!DOCTYPE html>
<html>
<head>
<title>Company Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Font Awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="Flex Slider/flexslider.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="mainNav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header pull-left">
Lorem
</div>
<button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target="#navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
whiteSpaceImg
Second questioin is about white space on right side
<!-- SLIDER -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li>
<li id="slide2"><img src="Images/Slider Images/image1.jpg"></li>
<li id="slide3"><img src="Images/Slider Images/image2.jpg"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
</ul>
</div>
</div>
</div>
</div>
/----- NAVIGATION ----/
html{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#mainNav{
background:transparent;
border: none;
overflow:hidden !important;
}
.navbar-default a{
color: white !important;
transition: color 0.5s;
font-weight: bolder;
}
.navbar-default a:hover{
color: black !important;
}
#slider{
border: none;
margin: 0px !important;
}
/* ---- HEADER -----*/
#slider img{
height: 100vh;
width: 100%;'
}
.col-sm-12{
padding-left:0 !important;
padding-right:0 !important;
}