I built a site for one of my clients with this template - http://www.templatemo.com/tm-395-urbanic
The site is http://www.southholstonriverlodge.com
They recently wanted me to change up the nav bar. It previously was only linked to anchors within the template which worked fine. I tried changing it to link to other pages ex.
<li class="active">HOME</li>
and they are no longer working.
The nav links that go to anchors still work and the links that go to external pages work. And I can right click and open the pages in new tabs, but directly clicking does nothing. I've tried so much to fix this and just can't get anywhere. Ideas? I'm at a point of not even knowing where to look. I'm fairly new with bootstrap and I was working on implementing a dropdown, thinking that was the issue, removed it. I'll include some code snippets but I'm not even sure where to begin.
.nav > li > a {
padding: 10px 10px;
}
.nav > li > a:hover,
.nav > li > a:focus {
background-color: #648c33;
color:#fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: #648c33;
color:#fff;
}
.nav > li > a {
color: #929292;
}
.navbar-default {
background-color:#fff;
border:none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #005200;
color: #fff;
}
.navbar {
margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/SHRL Template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>South Holston River Lodge | World Class Fishing | Luxury Lodging</title>
<!-- InstanceEndEditable -->
<meta name="keywords" content="south holston river lodge, lodge, soho, tennessee fly fishing, tennessee lodge, south holston, fly fishing, float, wade, guide, all inclusive, lodging, vacation, trips, cabins, home, bristol, tennessee, tn, destination, eastern tennessee" />
<meta name="description" content="South Holston River Lodge is located in Eastern Tennessee. It is a destination fly fishing lodge with excellent year round fishing." />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51645845-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-51645845-1');
</script>
<!--
Urbanic Template
http://www.templatemo.com/tm-395-urbanic
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="shortcut icon" href="PUT YOUR FAVICON HERE">-->
<link rel="shortcut icon" href="images/favicon.ico?v1.ico">
<!-- Google Web Font Embed -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="js/colorbox/colorbox.css" rel="stylesheet" type='text/css'>
<link href="css/templatemo_style.css" rel="stylesheet" type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="OptionalRegion1" type="boolean" value="true" -->
</head>
<body>
<div class="templatemo-top-bar" id="templatemo-top">
<div class="container">
<subheader>
<div id="phone" class="pull-left">
<img src="images/phone.png" alt="phone">
877.767.7875
</div>
<div id="email" class="pull-right">
<img src="images/email.png" alt="email" title="Email Icon"> bookings#southholstonriverlodge.com
</div>
</subheader>
</div>
</div>
<div class="templatemo-top-menu">
<div class="container">
<!-- Static navbar -->
<div 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-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/sohorl.png" alt="SHRL Logo" width="200" title="South Holston River Lodge" />
</div>
<div class="navbar-collapse collapse" id="templatemo-nav-bar">
<ul class="nav navbar-nav navbar-right" style="margin-top: 40px;">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li><a rel="nofollow" href="https://www.flickr.com/photos/138605916#N04/albums" class="external-link" title="Photo Gallery" target="_blank">GALLERY</a></li>
<li><a rel="nofollow" href="https://southholstonriverlodge.wordpress.com/" class="external-link" title="Fishing Report" target="_blank">FISHING REPORT</a></li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div><!--/.navbar -->
</div> <!-- /container -->
</div>
I noticed id="templatemo-nav-bar" in your template, and when I search the web for this I find people suggesting adding class="external" to the link:
HOME
I can't test this myself because your example is probably missing some javascript. Hope it helps :)
EDIT
Looking at the template script, it might actually be class="external-link":
HOME
This should unbind the click event handler, allowing the link to work as expected.
Looking at the template you linked, it looks like clicking on the links does a smooth scroll down the page instead of using the browser's native anchor link functionality. This means there's some javascript handling this and overriding the browser's default behavior. In the template's javascript here we see this section:
// scroll to specific id when click on menu
$('.templatemo-top-menu .navbar-nav a').click(function(e){
e.preventDefault();
var linkId = $(this).attr('href');
scrollTo(linkId);
if($('.navbar-toggle').is(":visible") == true){
$('.navbar-collapse').collapse('toggle');
}
$(this).blur();
return false;
});
It's overriding the browser's default link behavior using e.preventDefault() and then using scrollTo() to move the page. Unfortunately I think this means you're pretty much stuck with this behavior unless you can modify the javascript or modify the template extensively.
Related
I keep seeing this effect used on a lot of websites and am wondering how they're doing it
Example: https://app.uniswap.org/#/?intro=true
When you hover over one of the navbar links, it looks like a button instead of a different colored text link. How would I do this? Also using bootstrap v5.3.0-alpha1 if that makes any difference
I have this navbar as an example:
import './App.css';
import React, { useState, useEffect } from "react";
const App = () => {
return (
<div className="App">
<nav className="navbar navbar-expand-sm">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand d-none d-md-block" href='/'>
<img src={"./logo.png"} style={{ height: '50px', width: '50px'}} alt='' />
</a>
<div className="collapse navbar-collapse text-center justify-content-center" id="navbarTogglerDemo01">
<div className="navbar-nav">
<a className="nav-link active" aria-current="page" href="/#">Home</a>
<a className="nav-link" href="/#">about_1</a>
<a className="nav-link" href="/#">about_2</a>
<a className="nav-link disabled" href='/'>Disabled</a>
</div>
</div>
<div className="btn-group">
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider
chains={chains}
initialChain={mainnet}
theme={lightTheme({
borderRadius: 'small'
})}
>
<ConnectButton accountStatus='address' chainStatus='none' showBalance={false} />
</RainbowKitProvider>
</WagmiConfig>
<div className="dropdown">
<button className="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
<i className="bi bi-three-dots"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end" style={{ width: '30vw'}}>
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
{/* <li><i className={darkMode ? 'fas fa-sun' : 'fas fa-moon'}></i></li> */}
</ul>
</div>
</div>
</div>
</nav>
);
};
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
It's just adding a background-color on hover. Also, add some padding around the links by default.
ul {
display: flex;
list-style: none
}
li {
margin-right: 15px;
}
a {
padding: 8px 15px;
color: #000;
text-decoration: none;
}
li:hover a {
background: #e1e1e1;
border-radius: 5px;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #000;
transition: color 0.3s ease;
}
nav a:hover {
color: #fff;
background-color: #000;
}
In the CSS code above, we first define the basic styles for the navbar,
including a flexbox layout for the ul element and some margin and padding
adjustments for the li elements.
Then, we style the a elements with text-decoration: none and a default
color of black. We also add a transition property to animate the color
change when the link is hovered over.
Finally, we define the :hover styles for the a elements. When a link is
hovered over, we change the color to white and add a background-color of
black to create a contrast with the text. This creates a simple but
effective hover effect for the navbar links.`
I have the following CSS and HTML code that I am using to develop a web project:
style.css:
body {
background-color: red;
font-size: 14px;
font-family: Roboto,arial,sans-serif
color: gray;
}
img {
height: 92px;
width: 272px;
}
a {
color: gray;
}
a:visited {
text-decoration: none;
}
.navbutton,
.footbutton {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav-img {
border-radius: 50%;
height: 32px;
width: 32px;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Google</title>
<link rel="stylesheet" type="text/css" href="style.css?version=8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar container">
<a class="navbutton" href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
<a class="navbutton" href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a>
<a class="navbutton" href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
<a class="navbutton" href="https://www.google.com/imghp?hl=en&authuser=0&ogbl">Images</a>
<a class="navbutton nav-img" href="https://www.google.com">
<img src="https://i.stack.imgur.com/34AD2.jpg">
</a>
</div>
<div class="bod">
<div class="main-img">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google">
</div>
<input type="text">
</div>
<div class="srch-button">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
<footer>
<div class="footbutton">
<a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2m--ahpm-0000000078-0000000001&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/">
Advertising
</a>
<a href="https://smallbusiness.withgoogle.com/?subid=us-en-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=us-en_US-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u">
Business
</a>
<a href="https://www.google.com/search/howsearchworks/?fg=1">
How Search Works
</a>
<a href="https://sustainability.google/commitments/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer&utm_content=">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAMAAAAiV0Z6AAAAPFBMVEVLoEN0wU6CzFKCzFKCzFKCzFKCzFJSo0MSczNDmkCCzFJPoUMTczNdr0gmgziCzFITczMTczMTczMTczPh00jOAAAAFHRSTlPF/+bIsms8Ad///hX+//5/tXw7aMEAx10AAACaSURBVHgBbc4HDoRQCATQ33tbvf9dF9QxaCT9UQaltLHOh/golXKhMs5Xqa0xU1lyoa2fXFyQOsDG38qsLy4TaV+sFislovyhPzLJJrBu6eQOtpW0LjbJkzTuTDLRVNKa3uxJI+VdiRqXSeu6GW+Qxi29eLIi8H7EsYrT42BD+mQtNO5JMjRuC4lSY8V4hsLX0egGijvUSEP9AbylEsOkeCgWAAAAAElFTkSuQmCC">
Carbon Neutral Since 2007
</a>
<a href="https://policies.google.com/privacy?hl=en&fg=1">
Privacy
</a>
<a href="https://policies.google.com/terms?hl=en&fg=1">
Terms
</a>
<a href="https://www.google.com/">
Settings
</a>
</footer>
</html>
For some reason, whenever I make a change to the css file, the only changes that I can see reflected in the browser (Chrome) are any changes I make to the img dimensions in the img selector (ex: I will see a change in browser if I change the height of img to 100px). No other changes are seen in browser. I have already tried adding a query string to the link href in the HTML file, as well as disabling caching in Chrome's developer tools menu. I assume it is a caching issue, however, the fact that I can still see only image dimension changes makes it a bit more complex. Anyone know any solutions?
Example of issue:
changing width in img selector from 272px to 372px is reflected in browser consistently. Changing background color from white to red (as shown in code above) is not shown in browser (rendered as white background).
It's likely your CSS styles are being superseded by another class, e.g. if you're importing a library that's applying it's own CSS.
You can either increase the specificity of your targeting by adding class names (see order of precedence).
.redContainer {
background-color: red;
}
or use !important to override other styles.
body {
background-color: red !important;
}
to me it worked. I saved your code here
and it works when I change some of the properties like background color or font color and etc. I ran the code on chrome
for example I changed background color:
body{
background-color: blue;
}
and it worked
so I guess the problem lies within your head element. maybe one of the stylesheet link addresses is wrong or maybe one of the stylesheets is getting more priority in running the css rules
I am currently making a website using bootstrap. I have a menu bar on top, and I would like to change the color or background color of the specific menu bar when the section of the website is in. Like example, one of menu is call about, and there is a section in homepage call about. When the person is on the about section of the webpage, I want menu "about" will change into different color background.
I used data-spy(scroll) and data-target(my-navbar) to check if it's work, but it was not working. Is there anyway I can fix this problem?
P.S. This is my navbar part and body part that I use it. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Provision Health & Wellness</title>
<meta name="description" content="ProvisionHW">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<style>
body {
padding-top: 40;
}
h2 {
text-align: center;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Provision Health&Wellness
</div> <!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Health Product</li>
<li>Blog</li>
<li>Slim Product</li>
<li>Video</li>
<li>Skin Product</li>
<li>Contact us</li>
</ul>
</div>
</div> <!-- End Container-->
</nav> <!-- End navbar-->
Here is fiddle that's working.
https://jsfiddle.net/5e1n0nhw/1/
Here is jQuery that tracks active section
$(function() {
$('a.page-scroll').bind('click', function(e) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}
, 1500, 'easeInOutExpo' //add/remove for smooth scroll
);
e.preventDefault();
});
});
Don't forget to include jQuery easing.
Add id of page-top to your body element and href page-top to your logo so you can scroll to top on click.
Add class page-scroll on all a elements that you want to lead to section.
Wrap all sections in section tag.
And now you can style active link with css
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
color:green;
}
Use this awesome tool that can customize your navbar color and give you the css needed.
http://work.smarchal.com/twbscolor/
I have the following directory structure:
I have put up a header which is going to come across all my webpages and the content is in header.html.
header.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom_styles.css"></link>
<script>
$(document).ready(function()
{
var pathname = this.location.pathname;
if( pathname.indexOf( 'index' ) > -1 )
{
$("#homepage").addClass( "active" );
}
else if( pathname.indexOf( 'java_archive' ) > -1 ) )
{
$("#javapage").addClass( "active");
}
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top"> <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
<div class="container-fluid" style="background-color:#5F5F5F;"> <!--505050 can also be considered -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li id="homepage"><span class="glyphicon glyphicon-home"></span></li>
<li>CONCEPTS</li>
<li>C</li>
<li>C++</li>
<li id="javapage">JAVA</li>
<li>ORACLE</li>
<li>DATA STRUCTURES</li>
<li>FAQs</li>
<li>REACH US</li>
<li>ABOUT</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>
</body>
</html>
My index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Programming Pages</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom_styles.css"></link>
<script>
$(function(){
$("#headerContent").load("header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
<div class="container"> <!-- PavanD: Evaluate between container-fluid and container.-->
<div class="row">
<div class="col-sm-12 img-rounded" style="background-color:#F1F1F1;">
<!-- PavanD: img-rounded helps in rounding the intro information -->
<h3 class="text-center">Welcome to the site!</h3>
<p>Getting placed into an established Software Company during Campus Recruitments is the dream of most Engineering students. All it needs is demonstrating technical expertise related to Computer Programming.</p>
<p>Computer Programming is a promising area and has great scope for opportunities. It is often misunderstood as being quite difficult. This is especially true for students who are not
from Computer Science or Information Technology braches. Also, students from Computer Science or Information Technology tend to stick to the programmes which they have had in their programming lab and Engineering curriculum itself is a bit hectic that most do not find time or guidance
to explore these areas. Moreover, there can be multiple solutions to the same problem. All these are very simple yet important things that ultimately help a student in building his technical expertise.</p>
<p>The content of this website is written taking into consideration the above fact. This wesite helps students receive programming guidance in an unorthodox way which is more closer to a students perspective and thus helps the student grasp the concept instead of having to by-heart it.</p>
<p>As it stands now, the website has two broad categories.
<li><b>BEGINNERS</b></li><li><b>INTERMEDIATE</b></li></p>
<p>Students can always post their questions by visting the Reach Me page.</p>
<p class="text-right">Happy Programming,</p>
<p class="text-right">Webmaster.</p>
</div>
</div>
</div>
</body>
</html>
My java_archives/index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$("#headerContent").load("../header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
<p>Reached Java Page!.</p>
</body>
</html>
I am noticing a difference in the way the header gets rendered in the root/index.html and the root/java_archives/index.html. The difference that I want to convey can be observed in the below screen shot:
Basically, I feel that my css in css folder is not getting picked during the evaluation at java_archives/index.html
My root/css/custom_styles.css looks like this:
.navbar-inverse .navbar-nav{
}
.navbar-inverse .navbar-nav > li > a {
font-family: sans-serif;
color: #ffffff; /* PavanD: This is the color of the elements when they load. */
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #000000; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}
.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
background-color: #8AC007;
color: #FFF;
}
li{
font-family:"Segoe UI",Arial,sans-serif;font-weight:normal;
}
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}
Is there something that I am missing here?. I am fairly new to CSS and so any inputs would be helpful.
Thanks,
Pavan.
EDIT: The following is with addition to java_archives/index.html.
In the root/index.html case, which is the top one, I can see my custom_styles.cxx overwriting the one from bootstrap. But in the second case, my stylesheet getting overwritten. And I am not able to comprehend why it is happening like that.
In addition to the missing css/custom_styles.css in your root/java_archives/index.html file....
With relative paths, such as css/custom_styles.css, the browser will look for java_archives/css/custom_styles.css instead of trying to find it in the root of your server.
You will need to either update the the path for the subfolder to ../css/custom_styles.css or use a fixed path /css/custom_styles.css
Just update your root/java_archives/index.html code like below..
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="../css/custom_styles.css"></link>
<script>
$(function(){
$("#headerContent").load("../header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
<p>Reached Java Page!.</p>
</body>
</html>
I have some issue with the nav menu of my website against the IE (again). Here I am trying to use Twitter's bootstrap to set up a menu bar for my website. Each of these items are supposed to align next to each other, which works well for Chrome, Firefox, and Safari. On Internet Explorer, however, each of the menu item are stacked on top of each other, and one menu item does occupy the entire width of the container. I wonder why the 'nav-justified' is not working on IE..?
Here is the header section:
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css" type="text/css"/>
<!-- Latest compiled and minified JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/master.css" />
<script src="lib/engine.js"></script>
</head>
This is the menu elements:
<div width="100%" style="color:white;">
<ul class="nav nav-pills nav-justified menu_bar">
<li>ABOUT US</li>
<li>NEW PROJECT</li>
<li>CURRENT PROJECT</li>
<li>PAST PROJECT</li>
<li>NEWS & PROMOTION</li>
<li>CONTACT US</li>
</ul>
</div>
And the css...
.menu_bar > li > a:hover,
.menu_bar > li > a:focus {
background-color: #312f32;
border: none;
color: #ddd241;
}
.menu_text {
font-family:'Cordia new';
font-size:140%;
color: white;
text-decoration: none;
color: #99979a;
}
This is my first time developing a website, and now I see the painful of ppl creating website for the IE... :'(
Making the <li> element float left in IE seems to fix it. You can add this to your HTML:
<!--[if lt IE 10]>
<style type="text/css" media="all">
.menu_bar > li {
float: left;
}
</style>
<![endif]-->