I have a simple static HTML site with a header.html file I'd like to reuse on each of the pages. I followed the suggestion from how to load header and footer before the content using jquery.load() which appeared to work but caused the drop-down on hover no longer function (must be clicked). The top is the navbar using jQuery.load, the bottom is identical code placed inline within my index.html. My css and js files are all included in my index.html file, not in the header.html file. Any thoughts on why this is occurring?
In my header, I have the code below:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
..and to include the header/footer I have:
<div id="header"></div>
Contents of my current header.html file:
<section class="header-uper">
<div class="container clearfix">
<div class="logo">
<figure>
<a href="index.html">
<img src="images/logo.png" alt="" width="250em">
</a>
</figure>
</div>
<div class="right-side header-padding">
<ul class="contact-info">
<li class="item">
<div class="icon-box">
<i class="fa fa-envelope-o spacer"></i>
</div>
<strong>Email</strong>
<br>
<a href="#">
<span>customer email</span>
</a>
</li>
<li class="item">
<div class="icon-box">
<i class="fa fa-phone spacer"></i>
</div>
<strong>Call Now</strong>
<br>
<span>customer #</span>
</li>
</ul>
</div>
</div>
</section>
<header class="navbar navbar-default">
<div class="container">
<div class="HeaderRow">
<div class="col-md-12">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar">
<li class="active">Home</li>
<li class="dropdown">
Our Practice <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Dr. Eaton</li>
<li>Staff</li>
<li>Our Office</li>
<li>Services</li>
</ul>
</li>
<li class="dropdown">
Education <span class="caret"></span>
<ul class="dropdown-menu">
<li>Eye Education</li>
<li>Covid 19 Safety Plan</li>
</ul>
</li>
<li>Optical</li>
<li>Insurances</li>
<li>Forms & Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
Reposting as an answer for that lucrative reputation...
You state that you are loading content into here:
<div id="header"></div>
It sounds like this is adding a new element into the DOM, which may break your CSS selector specifications if you're not ready for a div#header to appear in the middle of them. I'd look here first.
The other issue is that the DOM is going to be ready and the <header> will not have been loaded yet. You're then using jQuery to load new elements into the DOM, and those elements may still need to be initialized once the DOM has finished loading the new HTML.
Im trying to make the top of the webpage so its a grid of ratio 3:6 with the section on the left being a square image. and the section on the right being split horizontally in 2 with the top half being a bar with the title and the bottom half a naviagtion bar. this is my code. unfortuanetly the title is not appearing at all, and the image is appearing on top of the navigation bar and also not filling the width of the screen. Im really not sure what the problem. any help would be great! thanks
<div class="col-sm-6 col-md-3 col-lg-3 col-xl-3">
<img ng-src="img/sky-logo.jpg" width="200px"/>
</div>
<div class="col-sm-6 col-md-9 col-lg-9 col-xl-9 ">
<div id="top">
<div class="container">
<div class="clearfix">
<div class="pull-center"><title> title </title></div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">link 2</a>
</li>
</ul>
</nav>
</div>
<div ng-view></div>
</body>
for title you should use headings instead as <title> tag defines a title in the browser toolbar and should be placed in <head></head>
for layout that you described you can try the following code
<div class="col-sm-12">
<!-- for ratio 3:6 -->
<div class="col-sm-4">
<img ng-src="img/sky-logo.jpg" style="width:200px" />
</div>
<!-- for ratio 3:6 -->
<div class="col-sm-8">
<!-- top half -->
<div class="col-sm-12">
<div id="top">
<div class="container">
<div class="clearfix">
<div class="pull-center">title</div>
</div>
</div>
</div>
</div>
<!-- bottom half -->
<div class="col-sm-12">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">link 2</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
My website is here: blackdeath1098.github.io
As you see at the top, the navbar isn't at the top and the picture isn't underneath it.
What can I do to achieve this?
Something like this: https://www.devonstank.com
See how the top has it's navbar transparent while over the picture?
Basically that.
After looking at your website's code, you currently have your Navbar place under your image, just move
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Above the image instead of bellow.
Just wrap your nav tag with nav-wrapper and apply the mention style in CSS below.
I hope it helps
HTML:
<div class="nav-wrapper">
<nav role="navigation" class="navbar navbar-default navbar-static-top transparent">
<----navigation stuff---->
</nav>
</div>
CSS:
.nav-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 20;
}
Enjoy :)
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 175) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".navbar-fixed-top").removeClass("transparent");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".navbar-fixed-top").addClass("transparent");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://blackdeath1098.github.io/CSS.css" rel="stylesheet" />
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="scale-image">
<img src="https://blackdeath1098.github.io/synthwave3.jpg" class="scale-image">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="image-wrapper">
<br>
</div>
</div>
<section id="heading" class="heading">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="image">Simon's official webpage</h1>
</div>
</div>
</div>
</section>
<section id="top" class="top-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Hello and welcome to my website</h1>
<p class="first">A little about this site</p>
<br>
<p class="body">I have put up many personal websites in my lifetime, mostly because I could not be satisfied by the way they looked or turned out. However, I have decided to put my mind and body to this challenge and created from scratch, yet another, more official
personal website. All work done from now on will be on this site only. Unless I need some serious overhaul or facelift, this is the website that I will constantly update. The code is viewable on github here:</p>
<br>
<a href="https://github.com/blackdeath1098/blackdeath1098.github.io" target="blank" class="btn btn-default" role="button">
<i class="fa fa-github fa-lg"></i> Source Code
</a>
<br>
<br>
<br>
<br>
<br>
<hr>
<p class="first">A little about me</p>
<p class="body">My name is Simon Zhang. I am currently a freshman at Bergen County Technical Schools in Teterboro (at time of writing it is 2016). It has been a long way since I have first started programming. I first began with Python, but at the time I was
quite young and didn't make much sense of it. I returned to it after learning HTML, CSS, Bootstrap, and other front end development. I then focused on Python and learned how to use it for scripting purposes. I am now working on learning backend
with Flask (I absolutely abhor PHP). Other plans will come later, as the creator of Github, Chris Wanstrath, has said not to have too defined plans for the future. However, I do have at least some loosely defined plans of what to do next, and
those include Javascript (JQuery and Angular), Flask, some updates to the websites (RSS feed?), and Cocaine Cowboys. Past that I will probably want to learn C++. I have a few projects I am working on, and many more will come. My projects can
be seen in my "Projects" tab.
<br>
<br>
</p>
<p class="body">Currently however, I am looking for a job. My language skills include:</p>
<ul class="body">
<li class="body">English (Native)</li>
<li class="body">Chinese (Conversational)</li>
<li class="body">French (Basic)</li>
</ul>
<br>
<p class="body">My programming language skills include:</p>
<ul class="body">
<li class="body">HTML</li>
<ul class="dashed">
<li>Bootstrap</li>
<li>Material Design Lite</li>
<li>Skeleton</li>
</ul>
<li class="body">CSS</li>
<li class="body">JavaScript</li>
<ul class="dashed">
<li>JQuery (Almost finished learning)</li>
<li>AngularJS (Learning)</li>
<li>RevealJS</li>
</ul>
<li class="body">Python</li>
<ul class="dashed">
<li>Flask</li>
</ul>
<li class="body">Miscellaneous</li>
<ul class="dashed">
<li>Material Design by Google</li>
</ul>
</ul>
<br>
<p class="body">If you wish to hire me, or even just want me to work with you in a project, Feel free to contact me in the Contact Me section.</p>
</div>
</div>
</div>
</section>
<section id="projects" class="projects-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Projects</h1>
<div class="container">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-prog-js02 div-overlay">
<a href="#Javascript-projects">
<div class="overlay">
<span class="plus">
Javascript Projects
</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-html5-01 div-overlay">
<div class="overlay">
<span class="plus">
HTML/CSS projects
</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-github-01 div-overlay">
<a href="#other-projects">
<div class="overlay">
<span class="plus">
Other Projects
</span>
</div>
</a>
</div>
</div>
</div>
<h3>Javascript</h3>
<ul class="body">
<li>A mad lib about summer camp</li>
<li>The lyrics to Ode to Viceroy, by Mac Demarco (I only did this because it was a school assignment)</li>
<li>A calculator for Heron's formula (The form boxes are off, yes I am well aware. I have no intention of ever fixing them, I'm too lazy)</li>
</ul>
<h3>HTML/CSS</h3>
<ul class="body">
<li>My First Ever Published Website (warning, may cause PTSD, turn down volume)</li>
<li>My Second Website, copy and pasted from a Bootstrap Theme</li>
<li>My Second Website (Using MDL)</li>
<li>This Website</li>
</ul>
<h3>Upcoming Projects</h3>
<p class="body">I have many more projects coming. You should check regularly to see if I have added more projects here. I am also open to job offerings or collaborations</p>
<ul class="body">
<li>Cocaine Cowboys, a Hotline Miami mod (I will create a seperate website for this)</li>
<li>An HTTPS server so that I may host my own web server with backend</li>
<li>Something with Clay Allen, probably another website</li>
</ul>
</div>
</div>
</div>
</section>
<section id="cocaine" class="cocaine-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Cocaine Cowboys</h1>
<p class="first">Every bullet comes a choice</p>
<p class="body">Cocaine Cowboys is a mod of the famous top down blood-splattering, drug fueled rampage of Hotline Miami. The game will be set before the events of the first game, and will revolve around the character Daniels from Beard's unit. The story focuses
on Daniel's upbringings and life as a drug dealer, school teacher and finally, a soldier. Cocaine Cowboys will have a strong focus on drugs. New gameplay mechanics include taking drugs before missions, and receiving benefits and drawbacks based
on what you took. For example, by snorting cocaine, you will move and fire your revolver much faster, but have slower reload speeds due to your nervousness and fidgeting. Acids and other hallocinogens will slow down time, but will make you see
enemies that aren't there. A (tentative) release date is hopefully by the end of summer, 2017.</p>
<br>
<p class="body">I will create a new, separate website for this game as more artwork and music is produced.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Me!</h1>
<p class="body">Perhaps the section we've all been looking for, the contact me section. Well, because I can't use any backend on Github, these forms will not work. Instead, just send me an email at simzha19#bergen.org</p>
</div>
</div>
</div>
</section>
like this? I've added
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>
Good morning folks, this is only my 2nd question on here, so please bear with me and my minimums:
I just wrote up this lengthy message of how I put the ID and class commands in a section instead of a container, and why the section all the sudden overwrote my css height style. I then figured why not replace the # with a . in the CSS file, and voila, it worked again.
However, i know have a new problem. I have a fixed-top bootstrap navigation bar, and when i click on section #2, named Intro, the page scrolls down only a few pixels to display the first line of text. What i had intended was for the site to display the entire intro container. Any suggestions?
I hope this makes sense:
<body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container" id="navigation">
<div class="row">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#intro">Intro</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Welcome to TestZat</h1>
Lorem....
</div>
</div>
</div>
</section>
<section id="login" class="login-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Finde das Login script hier</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container" id="contact-section">
<div class="row">
<div class="col-md-10 col-md-push-1" id="contact">
Section content TBD
</div>
</div>
</div>
</section>
Now it will work fine...just remove id from container.
<body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div id="navigation">
<div class="row">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#intro">Intro</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Welcome to TestZat</h1>
Lorem....
</div>
</div>
</div>
</section>
<section id="login" class="login-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Finde das Login script hier</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container" id="contact-section">
<div class="row">
<div class="col-md-10 col-md-push-1" id="contact">
Section content TBD
</div>
</div>
</div>
</section>
I had downloaded a bootstrap template which has a dropdown menu in middle(mobile version).
Like this:
http://postimg.org/image/58hmpb8f5/
But i want dropdown menu on the top-right corner of my mobile screen
Like this : http://postimg.org/image/5fkeraou1/
This is my html code so far:
<header id ="top" class="mTop">
<div class="topHead">
<div class="container">
<div class="row">
<div class="topMenu">
<ul class="span12 topContact">
<li class="addresTop"><span class="icon-map-marker"></span>456 Jl.Pacar, Singapore</li>
<li class="mailTop"><span class="icon-envelope"></span>Office#Plasma.com</li>
<li class="phoneTop"><span class="icon-phone"></span>(+1) 321-9876520</li>
</ul>
</div>
</div>
</div>
</div>
<div class="headContent">
<div class="container">
<div class="row">
<div class="span4">
<div class="brand">
<img src="images/logo.png" alt="Logo">
</div>
</div>
<div class="span8">
<div class="menu" id="steak">
<nav>
<ul class="navMenu inline-list" id="nav">
<li class="current">Home</li>
<li>About</li>
<li>Service</li>
<li>Our Team</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
dont you want to use the latest boostrap instead? the latest bootstrap which is 3.3.1 has the navigation that you need.
code in bs3.3.1 is something like this
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
for bootstrap 2, the basic navigation where in you will have a top right menu in mobile view will be
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a 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>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>