I'm creating a webpage, I want to be able to do a header for each page
I want it to consist of
(An Image) Home news about us web call email
I have this code so far:
<!DOCTYPE html>
<html>
<body>
<nav class="navbar navbar-light bg-faded">
<img src="jazz.jpg" alt="HTML5 Icon" width="250" height="100">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">news</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">web</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">call</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">email</a>
</li>
</ul>
</nav>
</body>
</html>
However, I just get the image and the rest are under the image, how can I put them all next to each other and make the header background gray? Is there anyway to solve this issue??
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Home</li>
<li>News</li>
<li>About Us</li>
<li>Web</li>
<li>Call</li>
<li>Email</li>
</ul>
</div>
</nav>
<div class="container">
</div>
</body>
</html>
So this code will give you the header you are looking for. You can add an image in the header if you want still, but you will have to play around with the styling to make it look good. Let me know if you have any questions or need anything clarified. Hope this helps!
You can use display for this. display:inline or a newer version display:flex
Just add some css styling to your HTML to achieve your goal.
Play around with this JSfiddle:
https://jsfiddle.net/ry3hgrtq/
I added these classes to your html.
.navbar img {
display:inline;
float: left;
}
.navbar ul {
list-style-type: none;
}
.navbar li {
display: inline;
padding: 2px;
margin: 2px;
}
Related
This question already has answers here:
How to center nav-items in Bootstrap? [duplicate]
(3 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 2 years ago.
I have two navbars, one of which I want the text centered, but I'm having trouble understanding why I am unsuccessful in doing so. I am new to navbars in general as well as bootstrap, so I apologize If my mistake is obvious. Is it something I should be implementing in the bootstrap end, or is it something that can be addressed within the <style> tags? Thanks.
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #CBB677">
<ul class="nav navbar-nav navbar-center">
<li class="nav-item active">
<a class="nav-link" href="CoordinatorHomePage.aspx" >COORDINATORS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="TeacherHomePage.aspx">TEACHERS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="ParentsHome.aspx">PARENTS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="StudentHome.aspx">STUDENTS</a>
</li>
</ul>
</nav>
IMO, Bootstrap is unnecessarily hard. I use raw CSS JS and HTML, but I'll try to help.
Bootstrap has this example on their site:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
That should be what you're looking for.
You could also implement a navbar in raw HTML/CSS/JS:
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="index.css">
<title>Navbar</title>
</head>
<body>
<navbar>
<button onclick="window.location.href = '#'" class="active">Something</button>
<button onclick="window.location.href = '#'">Something else</button>
<button onclick="window.location.href = '#'">A third thing</button>
</navbar>
</body>
</html>
/* index.css */
navbar {
width: 100%;
height: 10%;
background-color: #d4d4d4;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
}
navbar>button {
color: #00ccff;
}
navbar>button.active {
color: #00ccff;
}
Lets say that i have a navbar with a brand text and 3 links like so:
PetesPCworld | Hardware | Software | Support |
Using this example: If i click on lets say "Hardware" then everything is okay, i can use the Brand text (PetesPCworld) to go back to the home page, but if i do this once again, lets say i click on the "Hardware" again, then i cant go back to the homepage using the Brand text.
And by default you start at the home page (duh..)
HTML CODE:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Peter">
<title>Számítógépes Hardver</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="main-style/main-style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<!-- W A R N I N G !!!! --------------- W A R N I N G !!!! -->
<!-- This is basically a school project, and in no way i'm a professional ! -->
<!-- Oh boi, this is some fine spaghet.. -->
<body>
<div id="nav-container" class="jumbotron text-center" style="margin-bottom:0">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- I think the problem is here with this <a> tag. -->
<a class="navbar-brand" href="#home">Számítógépes Hardver</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav nav">
<li class="nav-item">
<a class="nav-link" href="#MOBOandCPU" data-toggle="tab">Alaplapok, CPU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Memory-Types" data-toggle="tab">Memóriák</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bővítőkártyák</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Monitorok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nyomtatók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lapolvasók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Háttértárak</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kábelek</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mutató Eszközök</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Multimédiás eszközök</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hordozható Adattárolók</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Elavult Technológiák</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">
<div id="header-container" class="jumbotron text-center" style="margin-bottom:0">
<h2 id="header">Számítógépes Hardver</h2>
</div>
</div>
<div class="tab-pane" id="MOBOandCPU">
<p>dancing polish cow</p>
</div>
<div class="tab-pane" id="Memory-Types">
<p>dancing ukranian toilet</p>
</div>
</div>
</body>
</html>
CSS Code
#nav-container{
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#header{
padding: 1%;
}
#header-container{
padding: 0px;
margin: 0px;
}
This is my first attempt at actually trying to do some CSS outside of www.codeacademy.com and I am having some trouble.
When I run my code, I find that the text in the header is not aligning and the 'logout' is being pushed up against the right as opposed to having the same distance from the edge as 'My Inventory'.
What am I doing wrong?
Also feel free to tell me if I am structuring things badly or anything else, so I can learn. I hope this is the correct place for something like this!
HTML code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Blank</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<header>
<ul>
<li> <a class="active" href="#home">My Inventory</a></li>
<li><a class="browse" href="#browse">Browse Papers</a></li>
<li><a class="build" href="#build">Build A Paper</a></li>
<li><a class="data" href="#data">View Data</a></li>
<li style="float:right"><a class="admin" href="#admin">Settings</a></li>
<li style="float:right"><a class="logout" href="#logout">Log Out</a></li>
</ul>
</header>
</div>
</div>
</body>
</html>
CSS
html {
font-family: "PT Sans", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.container {
min-height:100%;
min-width:100%;
display: grid;
}
a {
text-decoration: none;
}
.header{
font-size: 18px;
line-height: 1.25pt;
background-color: #00AFB5;
width: 100%;
height: 50px;
top: 0;
margin: 0;
padding-top: 20px;
padding-bottom:20px;
padding-left: 10px;
padding-right: 10px;
list-style-type: none;
}
.header li {
display: inline-block;
}
.header a {
display: block;
color: #fff;
}
Use bootstrap, it gives you plenty of options for resizing the viewport and keeping your look and feel of the style. Here is a default example of bootstrap using your link settings. View it in full page mode in the snipit.
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/components/navbar/
NOTE: I am using the CDN for the example, if you wish to change the styles
Download the bootstrap file.
Search For bootstrap css file.
Open the (bootstrap. css) file and search for 'primary'.
Change it to the color you desire.
You can change any of the theme colors there.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link active" href="#home">My Inventory</a>
</li>
<li class="nav-item">
<a class="nav-link browse" href="#browse">Browse Papers</a>
</li>
<li class="nav-item">
<a class="nav-link build" href="#build">Build A Paper</a>
</li>
<li class="nav-item">
<a class="nav-link data" href="#data">View Data</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link admin" href="#admin">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link logout" href="#logout">Log Out</a>
</li>
</ul>
</div>
</nav>
Run the snipit in full page mode.
I am a bit stuck trying to place or stack two navigation menus on top of each other, I am using Bootstrap, HTML and CSS.
I think I might need to use the z-index, but not sure exactly how.
I have added the code below and included picture of what I would like to achieve.
Code:
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-white navbar-white">
<a class="navbar-brand" href="#">
<img src="assets/logo2.png"height="84px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="accessability">
<li class="nav-item">
<a class="contrast">Contrast</a>
</li>
<li class="Font-size">Font size</a>
</li>
<li class="download">Download a brochure</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">New Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Motability</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aftercare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class="navbar navbar-inverse bg-primary">
<ul>
<li class="sec-menu">Versa Connect</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="sec-menu">Overview</li>
<li class="sec-menu">Offers</li>
<li class="sec-menu">Models</li>
<li class="sec-menu">Optional Extras</li>
</ul>
</nav>
<section id="cover_image">
<div class="container">
<img src="assets/cover_image.jpg" >
<div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
Great to drive, great to sit in, it boasts premium finish, high quality materials
and fuel efficiency without compromising everyday practicality. </p>
<button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
</div>
</div>
</body>
</html>
CSS
h1{
font-family: roboto;
}
p{
font-family: roboto;
font-size: 18px;
}
li{
font-family: roboto;
font-size: 18px;
display:inline;
padding: 30px;
}
li a{
color: #000;
}
.navbar-right{
float: right !important;
margin-right: -15px;
display: inline;
}
ul.nav navbar-nav navbar-right li a{
display: flex;
}
li.sec-menu a{
color: #fff;
font-family: roboto;
}
.container{
margin: 0;
padding: 0;
}
.text-block {
text-align: center;
position: absolute;
bottom: 10px;
left: 100px;
background-color:rgba(255,255,255,0.66);
color:#000;
width: 380px;
padding:50px;
}
.btn btn-lg btn-primary{
padding-left: 10px;
width: 360px;
}
I would appreciate it if somebody could help me with my coding and show me how or where I should code the z-index in my code.
The z-index property is used for stacking items on top of each other via the z plane (think of a 3-dimensional plane), so that property would not help you here. All you need to do is create each navbar using a separate "nav" or "div" tag, which will put them on separate lines.
You are on the right track, but you have multiple errors in your code that are causing this issue. Your navbar consisting of "Contrast, Font Size, Download a Brochure" have closing anchor tags but not beginning anchor tags. This navbar is also using a class "accessability" that is not defined in your CSS, which is why it's appearing as an unstyled unordered list.
Here is a simple version of what you are looking for:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<nav>
<ul>
<li>Contrast</li>
<li>Font Size</li>
<li>Download a Brochure</li>
</ul>
</nav>
<nav>
<ul>
<li>New Vehicles</li>
<li>Nearly New/Used Vehicles</li>
<li>Motability</li>
<li>Aftercare</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
This works, you do not need the z-index. You can view it here on codepen https://codepen.io/anon/pen/Rvdgaq
<nav class="navbar navbar-expand-md bg-white navbar-white">
<a class="navbar-brand" href="#">
<img src="assets/logo2.png"height="84px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="accessability">
<li class="nav-item">
<a class="contrast">Contrast</a>
</li>
<li class="Font-size">Font size</a>
</li>
<li class="download">Download a brochure</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">New Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Motability</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aftercare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse bg-primary">
<ul>
<li class="nav-item sec-menu">Versa Connect</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item sec-menu">Overview</li>
<li class="nav-item sec-menu">Offers</li>
<li class="nav-item sec-menu">Models</li>
<li class="nav-item sec-menu">Optional Extras</li>
</ul>
</nav>
</div>
</div>
<section id="cover_image">
<div class="container">
<div class="row">
<img src="assets/cover_image.jpg" >
<div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
Great to drive, great to sit in, it boasts premium finish, high quality materials
and fuel efficiency without compromising everyday practicality. </p>
<button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
</div>
</div>
</div>
</section>
A Few things I noticed, 1. You did not close off your section tag so that could be causing issues. And you do not need postion: absolute; on .text-block, take off bottom: 10px;
Make it position relative
This will be lot's of typing involved.
I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields
At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)
Just giving an example of one of the menus
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Navigation Menu</title>
<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"><\/script>')</script>
<script src="Libs/Popper/popper.min.js"></script>
<script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">
<link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">
<a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">
<!-- Carousel -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-navbar" id="main-navbar">
<ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">
<li class="nav-item">
<a class="nav-link" href="#">PRODUKTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIENSTLEISTUNGEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">UNTERNEHMEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NEWSROOM-STORY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPOTLIGHT:TECHNIK
<?php //echo $spotlight; ?>
</a>
</li>
</ul>
<ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">
<li class="nav-item">
<a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>
</li>
<li class="nav-itemv">
<a class="nav-link text-danger" href="#">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DATENSCHUTZ</a>
</li>
<li class="nav-itemv">
<a class="nav-link" href="#">KONTAKT</a>
</li>
</ul>
<!-- Language Menu -->
<ul class="nav navbar-nav mr-auto language-menu" id="language-menu">
<li class="nav-item">
<a class="nav-link" href="#">DE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
And the extra css is as follows
.smaller_font{
font-size: 80%;
}
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
At the moment I am trying to use #include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.
The idea is that the fields in the menu are going to have 1px bottom border.
I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working
or setting width in pixels with "#media" tag but using "#include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).
I need someway to get things to work on small scale, so that I can build from there :-)
"At the moment I am trying to use #include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."
This isn't CSS...
#include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}
It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.
Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.