Below is the link to my current implementation of Navbar using bootstrap 3.1.1.
I have used container class to all Nav also. is it the correct implementation ? if I don't use container class to nav, it exceeds the width of Container. So I had to use it. Can someone please confirm whether its the right implementation?
When I click on any button, the MainContent Child div's Slide up or Slide Down, once it crosses the Nav bar. I want it to be hidden (Scrolling div which you see above the Nav Bar), but its not hiding. I've tried to add one more div above Nav, but even that exceeeds the width of container though its inside container. So I've tried to use container class for that also, it worked fine but when I resize my browser to small size that div disappears and again I am able to see mainContent child item moving able the Nav bar.
HTML
<meta charset=”utf-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html>
<head>
</head>
<body>
<div class="container">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
<div class="container inside-bar">
<ul class="nav navbar-right">
<li class="active">About</li>
<li>Services</li>
<li>Our Staff</li>
<li>book</li>
<li>Gift Cards</li>
<li>Reviews</li>
</ul>
</div>
</nav>
</div>
<div id="mainContent">
<div id='Services' class="box">
Services
</div>
<div id='about' class="box">
About
</div>
<div id='OurStaff' class="box">
Our Staff
</div>
<div id='book' class="box">
book
</div>
<div id='Gift' class="box">
Gift
</div>
<div id='Reviews' class="box">
Reviews
</div>
</div>
</div>
</body>
</html>
Currently in the link you will not see the Div which I added before Nav.
http://codepen.io/anon/pen/DmiGs
you can add container . Implementation is ok
.navbar-default{
background: black !important;
padding-left: 0px;
border-color: rgba(231, 231, 231, 0) !important;
text-transform: uppercase;
}
Related
HTML
<body>
<!-- Header -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#home">
</a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
I'm trying to add a logo to my website. The logo fills the screen. I can't adjust its size.HTML codes like this.
It is difficult to answer without seeing the stylings and I see you haven't provided a proper code.
Just give the img tag a width and a height and position the div wrapping it correctly.
Something like this,
div {
position:relative;
text-align:center;/* Add This*/
}
<div>
<img src="https://www.w3schools.com/tags/img_girl.jpg" width='300px' height='400px'/>
</div>
I suggest you to refer the following,
Positioning a div
Inserting an img
Good luck mate!
I have a problem with the navbar-fixed-top item. It hides content form the container.
This is a common problem solved by adding the following css code :
body { padding-top: 70px; }
Now, when I load my page, the container is not hidden by the navbar anymore. The problem is when I want to go to a specific item in the page with a href=#item. In this case, the item is always hidden by the navbar.
I have created a simple code on Codeply which shows this problem. In this example, when I click on "Got to test3", the item <h2 class="font-weight-light">TEST3</h2> is hidden by the navbar.
Here is the code below :
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
<div class="row">
<div class="col">
<div class="sidebar-sticky" id="menu">
<ul class="nav flex-column">
<li class="nav-item">
Go to test1
</li>
<li class="nav-item">
Go to test2
</li>
<li class="nav-item">
Go to test3
</li>
<li class="nav-item">
Go to test4
</li>
</ul>
</div>
</div>
<div class="col">
<div id="test">
<h2 class="font-weight-light">TEST1</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test2">
<h2 class="font-weight-light">TEST2</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test3">
<h2 class="font-weight-light">TEST3</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test4">
<h2 class="font-weight-light">TEST4</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>
Here's the solution
body {
padding-top: 70px;
}
#test{
padding-top:90px;
}
#test2{
padding-top:90px;
}
#test3{
padding-top:90px;
}
#test4{
padding-top:90px;
}
For the current case, you could add the padding to the div elements which have a h2 following them (such as "Test3"). Adding div h2 { padding-top: 70px; } does that for your current structure. However, in order to not depend on the h2 following a div as you further develop your project, you could also create an own class to which the padding-top-rule applies, and add it to those elements for which it is needed.
Hope that helps.
From the question Fixed page header overlaps in-page anchors, the solution is not the accepted answer but is in the answers. So I'll repeat it here.
I have add this class in the css file :
.hreflink::before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
and then I have define every element I want to go to with this class, for example :
<div id="test3" class="hreflink">
I am new to CSS, I have a header with a menu list and an image just below the header.
When I hover on Gallery within menu bar, it displaces the image below by the height of hovered block.Is there any way to make the content overlap on the image rather than displacing it.
<header class="container">
<h1>First <br/> Website</h1>
<nav>
<ul class="nav group">
<li>Home</li>
<li>Gallery
<ul>
<li><span>Images</span></li>
<li><span>Videos<span></li>
<li><span>Animations<span></li>
</ul>
</li>
</ul>
</nav>
</header><!-- /header -->
<section class="container img" id="corousel">
<img src="trolltunga.jpg" alt="Test Image">
</section>
<footer class="container">
More to come...
</footer>
Here is a fiddle to my code, https://jsfiddle.net/khushboo_sangal/5xLs5odu/
You need to take the dropdown menu out of the document flow by positioning it absolute. Just make sure to set it's parent's position to relative.
.nav li {
position: relative;
}
.nav li ul {
position: absolute;
}
https://jsfiddle.net/5xLs5odu/2/
You also had some unclosed <span /> tags in your nested ul. Thanks #vals for pointing this out:
<li><span>Videos</span></li>
<li><span>Animations</span></li>
Can someone please help me to apply the right media query on a responsive Bootstrap one page template I'm working on.
I managed to show the toggle menu button from 240px to 640px width instead of up to 980px, but I can't manage to show the main navigation menu from from 640px to 980px.
After 980px it displays fine again.
Here the media query I created for the toggle menu button:
#media (min-width: 639px) {
.btn-navbar {
display: none;
}
}
And here the html for the whole header section:
<!-- header -->
<div class="masthead">
<div class="stripes"></div>
<div class="container">
<!-- button for small devices-->
<div class="row no-margin">
<div class="span12">
<div class="hidden-desktop"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-align-justify"></span></a></div>
<div class="brand"> <img src="img/logo.png" alt="" /></div>
<!-- navigation -->
<div class="navbar main-nav">
<div class="nav-collapse collapse" >
<ul class="nav pull-right ">
<li>Home</li>
<li>Intro</li>
<li>Amulets</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end navigation -->
</div>
<!-- end container -->
</div>
<!-- end header-->
I tried everything I can think of but can't manage to get it right.
Any help would be very much appreciated.
Well you could try simply using the !important directive:
#media (min-width: 639px) {
.btn-navbar { display: none !important; }
}
Granted, this is not the most elegant solution.
But your problem seems to have to do with your styles, not your markup.
It is most likely to be conflicting styles.
I think for this one, we'll have to look deep into the whole stylesheet to find the problem.
Also, note that the .btn-navbar link is inside a <div> with a .hidden-desktop class.
I have a problem with this example: http://jsfiddle.net/JYkUS/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FSou1::Верстка макета</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="logo-wrapper">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="Logo" width="90" height="90" />
</a>
</div>
<div class="logo-text">
<span>Happy Nanny</span>
</div>
<div class="menu">
<ul>
<li class="first">HOME</li>
<li>SERVICES</li>
<li>NEWS & PRESS</li>
<li>FIND JOB</li>
<li>CONTACTS</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
</body>
</html>
Span with text
<span class="easy-way">THE EASY WAY</span>
as default has margin-left, but i don't know why. I really don't want to set a negative value to margin-left. Is it possible to align this span to left border and why does it now have margin with such value?
P.S. Watched in Google Chrome (firefox doesn't have this margin)
EDIT:
Just if i remove this style:
.logo-wrapper .logo, .logo-wrapper .logo-text {
float: left;
}
my span goes to left border =\ but why is it so?
EDIT2: Other way, to move <div class="clear"></div> from 'logo-wrapper' container, to root-level as
<div class="logo-wrapper">
<div class="logo"></div>
<div class="logo-text"></div>
<div class="menu"></div>
<!-- FROM HERE -->
</div>
<div class="clear"></div> <!-- MOVE HERE -->
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
But still can't understand, why floating still work after inner clear:both div
EDIT3: Is it because float:right menu even goes "righter", than div with clear:both?
The margin is actually applied on the body tag. You can remove it using:
body {
background: none repeat scroll 0 0 #F8F7E5;
font-family: Arial;
font-size: 100%;
margin-left: 0;
margin-top: 40px;
}
Working Example: http://jsfiddle.net/JYkUS/2/
This is commonly handled using a reset.css file which removes all browser specific styling from the page, so you can start from a single base point when creating a cross browser compliant webpage. I would recommend applying such a strategy to the site.
That is because you haven't set the body margin to 0
Make it margin:40px 0 0 0
body {
margin: 40px 0 0 0;
font-size: 100%;
font-family: Arial;
background: #f8f7e5;
}
DEMO