I have designed a webpage which is only one navbar.
The navbar works completely fine when I am using it in my computer simulating using PHPstrom, but when I upload it to my host it start to behave badly.
Replacing the colors I gave it or combining them.
The align of flex box which I want menu to be in the middle but keep using right.
The hover effect I designed will keep overwrite by default one.
It keeps ignoring almost everything i write in my CSS and the ones it doesn't ignore, it shows half broken. None of this happens in my local server (either with xammp or PHPStorm run)
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #e8e8e8;
color: #242424;
}
.wrapper {
width: 100%;
}
/*****navbar****/
ul {
direction: rtl;
}
ul li {
padding: 0 10px;
}
.bg-dark {
background-color: #242424 !important;
}
.nav-a {
text-decoration: none;
direction: rtl;
justify-content: right;
border-bottom: solid transparent 3px;
transition: all ease-in 0.3s;
color: #e8e8e8;
}
.nav-a:hover {
border-bottom: solid rgb(80, 80, 80) 3px;
}
.navbar-me {
color: #e8e8e8;
justify-content: space-between;
text-align: center;
min-height: 10vh;
height: auto;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--STYLE LINKS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<title style="direction: rtl"> </title>
</head>
<body>
<!--start Wrapper-->
<div class="wrapper">
<!--navbar START-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-me">
<!------------------n--------NAVToglle---------------------------------------->
<a class="navbar-brand" style="font-family:monoton,sans-serif; font-size: 1.6rem; color: #e8e8e8;">Technotron</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse m-auto" id="navbarSupportedContent">
<!--Unordered list----->
<ul class="navbar-nav m-auto " style="justify-content: right; text-align: right;">
<li class="nav-item active"><a class="nav-link nav-a" href="#">خانه</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">محصولات</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">خدمات</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">تماس با ما</a></li>
</ul>
<a style=" display: inline-block; padding: 10px; background: #e8e8e8; color: #242424; text-decoration: none;" href="#"><span> فروشگاه <img src="Mainpage/pic/cart.jpg" style="width: 30px;" alt=""></span></a>
</div>
</nav>
<!--navbar STOP-->
</div>
<!--END Wrapper-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
At first please check is your css file accessible on [www.your-theme-assets.com]/main.css then in browser with inspect element tools check is your theme reading you css class file? for example in firefox:
your css file may not be read correctly
or css file its been cache for test change you can you add version number end of your css file address and each time you change the css file for see new changes without caching just change number of version file in source like tihs:
themeaddress/css/style-min.css?v=2.0.4
?v=2.0.4 do nothing it just force browser read new css file
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.`
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am making a webpage and i want that the name of the brand should appear right next to the brand logo, just to the right of the brand logo. I have tried using the float-left property but nothing is doing good.
I have provided both the html as well as css sheet, plz someone help. And if possible try to fix this without using flex-box.
Here's my code:
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
background: url("BurgerKING1.png") no-repeat;
width: 152px;
height: 152px;
margin: 10px 15px 10px 0;
}
<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT TESTING</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght#0,900;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="testing.html" class="float-left">
<div id="logo-img" alt="logo image"></div>
</a>
<div class="navbar-brand ">
<a href="testing.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Make .navbar-image (I added a class name) and .navbar-brand both float left, then give .navbar-brand a margin-top to center it vertically:
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
background: url("https://placekitten.com/200/200") no-repeat;
width: 152px;
height: 152px;
margin: 10px 15px 10px 0;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand{
margin-top: 50px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="testing.html" class="navbar-image float-left">
<div id="logo-img" alt="logo image"></div>
</a>
<div class="navbar-brand ">
<a href="testing.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</div>
</nav>
</header>
CSS:
.float-left{
float: left
}
.navbar-brand {
float: left
}
I had a look at your code and you can achieve that by using flexbox and its property justify-content: flex-start, add below properties to your style sheet -
.navbar-header{
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
I'm new to html + css and having lots of trouble while making a basic simple website. My css properties often be overridden by static property that I can't find with inspect tool in Chrome.
Regarding CSS, my body tag is not working at all, the h3 tag also not working even though it's separated from class/div, etc.
Then my hover code is partly working, every code in the hover tag works just fine, however, if I want to change the text color to white, it doesn't do anything.
Regarding html, I put up a banner and the text is hidden behind the banner, I am unsure how to pull it out and place beneath the banner.
body{
clear: both;
background-color: #EBD8B7;
}
.navbar{
background-color: #EBD8B7;
height: 70px;
}
.navbar-brand {
font-size: 3em;
padding-left: 50px;
color: #DA723C;
font-family: 'Dancing Script', cursive;
letter-spacing: 5px;
}
.nav-link
{
color: #DA723C !important;
font-size: 25px;
margin-right: 50px;
font-family: 'Dancing Script', cursive;
}
li a:visited{
color: #ee9a00;
}
a:hover {
text-transform: uppercase;
color: white;
border-bottom: 0.5px solid #fff ;
}
.h3{
color: red;
font-size: 3rem;
text-align: center;
}
.banner {
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background-image: url(pic.png);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>36 Cafe</title>
<link rel="shortcut icon" href="logo.ico" />
<!-- Boostrap5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<!-- Jquery here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="">36 Cafe</a>
<button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Order Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Hours</a>
</li>
</ul>
</div>
</nav>
<h3> WE ARE OFFICIALLY OPEN FOR DINE-IN </h3>
<div class="banner">
<div class="content-area">
</div>
<h5>Please wear your mask</h5>
<p> We have 50% of capacity, please wear your mask until seated.</p>
<p> She nervously peered over the edge. She understood in her mind that the view was supposed to be beautiful, but all she felt was fear.
There had always been something about heights that disturbed her, and now she could feel the full force of this unease.
She reluctantly crept a little closer with the encouragement of her friends as the fear continued to build. She couldn't help but feel that something horrible was about to happen. </p>
</div>
<script>s
</body>
</html>
body {
background:red;
}
.body {
background:red; /* does not work*/
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
You've done a very simple mistake with the body tag. Instead of bodyyou've used .body. The dot is only used for classes, to directly select an element by its tag you just use its tag name. For example, h1 {}selects all h1 tags and .first-h1 will select all elements that have that class.
Kind of a peculiar thing happening here...
I'm using ASP.NET in Visual Studio 2015. When I add custom CSS within a <style> tag in the header of my HMTL document, my CSS will override Bootstrap's CSS, but when I reference my CSS in an external .css file it does not... Here is my code (the CSS in the style tag is the exact same as what's in the external css sheet):
<head runat="server">
//BOOTSTRAP CSS
<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="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%--<link rel="stylesheet" href="App_Code/MainStyleSheet.css" type="text/css" />--%>
//UNCOMMENTING THIS WILL NOT OVERRIDE BOOTSTRAP CSS
<style>
//THIS CSS WILL OVERRIDE BOOTSTRAP CSS
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<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>
<a class="navbar-brand" href="#">X.com</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Projects</li>
<li>Contract</li>
</ul>
</div>
</div>
</nav>
</body>
All searches on Google for a resolution say that putting my .css link underneath the Boostrap CSS links should override it, but that's what I've tried and it's not working. Any suggestions?
Move your MainStyleSheet.css file outside your App_Code folder. App_Code folder has a default Compile build action instead of Content.
Try and wrapping your html code inside a div and give it a class/id and try to override with that wrapping div.
HTML:
<div class="wrapping_class">
<nav class="navbar navbar-default">
</nav>
</div>
CSS:
.wrapping_class .navbar.navbar-default{
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
This is a solution based on CSS specificity that plays a role in overriding certain CSS rules based on their power.
Refer to this link for table of specificity values (for Star Wars fans a treat):
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
To start i am very new to bootstrap but i wanted do something similar to this example:text over background image but inside of a bootstrap framework. I have tried creating a div inside the container below the navbar but that seems to put a white background behind the text covering the image behind... you can see my code here: JSFiddle: my code. or it is as follows:
CSS
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#import url(http://fonts.googleapis.com/css?family=Oswald:700);
html {
background: url(http://3.bp.blogspot.com/_6r-mOI0OuO0/S6q3VodCqI/AAAAAAAAB5A/Uycl8dCr92A/s1600/NYC15BrooklynBridge02.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Oswald', sans-serif;
}
h1 {
color: #fff;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}
span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #fff;
}
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Full - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald:700);
h1 {
color: #FF6600;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}
span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #FF6600;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Start Bootstrap</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>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<h1>
<span>some text</span><br>some other text
</h1>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Just add body { background: none; }. FIDDLE
I see that you had added the CSS style to the whole body which means you then have to turn off all background for everything that sits on top of it. But you could just add the style you created to the container with the text in it. You then may need to style the text to make is visible.
<div class="container full">
<h1>some text</h1>
<h1>some other text</h1>
</div>
Btw You really shouldn't have two bits of header text split with a break, use two headers and position them. Also you really should close the break tag if your going to use it. :)