I am new to django I want to create a responsive website im using django for it, the website works fine except for one thing when the website is switched to mobile view the navigation bar is not working.
This is my urls.py
from django.conf.urls import url
from app import views
urlpatterns =[
url(r'^$',views.index,name='index'),
url(r'^about/',views.about,name='about'),
url(r'^contact/',views.contact,name='contact'),
url(r'^portfolio_project1/',views.portfolio_project1,name='portfolio_project1'),
url(r'^portfolio_project2/',views.portfolio_project2,name='portfolio_project2'),
url(r'^portfolio_project3/',views.portfolio_project1,name='portfolio_project3'),
url(r'^resume/',views.resume,name='resume'),
url(r'^portfolio/',views.portfolio,name='portfolio'),
]
This is my header section
<header role="banner" class="banner clearfix" id="banner">
<div class="section-content">
<div class="branding clearfix">
<figure id="logo"><img src="{% static "images/logo.png" %}" alt="my logo" /></figure>
<h1>Sriram</h1>
<h2>Portfolio Website</h2>
</div>
</div>
Menu
</header>
<nav role="navigation" class="nav clearfix main-nav" id="nav">
<ul class="nav-menu">
<li class="menu-item">About</li>
<li class="menu-item">Resume</li>
<li class="menu-item">Portfolio
<ul class="sub-menu">
<li class="menu-item">Project 1</li>
<li class="menu-item">Project 2</li>
<li class="menu-item">Project 3</li>
</ul>
</li>
<li class="menu-item">Contact</li>
</ul><!--/.nav-menu-->
</nav>
This is my views.py
from django.shortcuts import render
from django.http import HttpResponse
def index (request):
return render(request,'index.html')
def about (request):
return render(request,'about.html')
def contact (request):
return render(request,'contact.html')
def portfolio_project1 (request):
return render(request,'portfolio_project1.html')
def portfolio_project2 (request):
return render(request,'portfolio_project2.html')
def portfolio_project3 (request):
return render(request,'portfolio_project3.html')
def resume (request):
return render(request,'resume.html')
def portfolio (request):
return render(request,'portfolio.html')
These are the scripts linked
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.12.0.min.js" %}"><\/script>')</script>
<script src="{% static "js/plugins.js" %}"></script>
<!-- Widowtamer -->
<script src="{% static "js/vendor/widowtamer-min.js" %}"></script>
<script src="{% static "js/main.js" %}></script>
I have tested the site without using django it works fine. But if i use django when i switch to mobile view the menu button is not working everything else works fine.
To solve this ...
in your main.html (other people choose to call it base.html) reference this Django template tag in the head tag session:
{% include "navbar.html" %}
and the navigation bar will appear on all your website session
Recommend watching this series for learning Django. https://www.youtube.com/playlist?list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW
To make a nav bar with bootstrap
Add this starter Template to base.html
Next Add this to the top of the body
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>`
Source https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
If you didn't find the starter template in this link
Then here is the code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 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>
When you're done Your code should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<title>BASE</title>
</head>
<body>
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'link1' %}">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link2' %}">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link3' %}">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link4' %}">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link5' %}">Link 5</a>
</li>
</ul>
</nav>
{% block content %}
Replace Me!
{% endblock %}
<!-- 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>
I created an HTML "navbar.html" containing my navbar code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Qina Smart Map</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href={%url "home"%}>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href={%url "admin"%}>Admin</a>
</li>
<li class="nav-item">
<a class="nav-link " href={%url "about"%}>About</a>
</li>
</div>
</nav>
then I used this tag in my HTML files
{%include 'navbar.html'%}
my url.py
urlpatterns = [
url(r'^$', qinaschools.views.home, name='home'),
path('about/', qinaschools.views.about, name='about'),
url(r'^qinaschools_dataset/$', qinaschools_dataset, name='qinaschools'),
path('admin/', qinaschools.views.admin, name='admin'),
]
Related
Right so, copied the standard bootstrap navbar code from both the bootstrap and the w3schools site. everything is working fine except when the navbar has collapsed to a hamburger menu nothing is displayed on click of the hamburger icon....
Even when copied and pasted with 0 edits its not working in Chrome.
Pretty sure i've properly linked all the files bootstrap needs...
Thanks for taking the time to help me out with this.
This is my complete html code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- Bootstrap Jquery files-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.min.js" integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" crossorigin="anonymous"></script>
<!-- Jquery-->
<script src="jquery-3.6.0.min.js"></script>
<!--Style-->
<link href="stylesheet.css" rel="stylesheet">
<!--Java-->
<script src="java.js"></script>
</head>
<body>
<!-- Navbar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="Logo/SVG/Black Diamond - LOGO-2021_White on BG.svg" width="200">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Snowboards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Accesories</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
I'm new to BootStrap and this is my first time creating a website. So if there is any way to improve the code even further please let me know!
Question: So when I go to collapse the navbar my navbar-brand logo shifts to the bottom. How do I have the logo remain on the top left when I reduce the size of the screen? Please refer to the linked images to see the problem.
I would like the logo to remain overlapping the navbar which I have done as shown on the "not collapsed" attached image.
collapsed
not collapsed
logo
.navbar {
max-height: 80px;
}
.navbar-brand {
padding-top: 90px;
}
.navbar-toggler {
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paradise Hotel</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
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<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://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
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>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="https://i.stack.imgur.com/i60Be.jpg" alt="Brand" width="180" height="180" >
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar-menu"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li class="nav-item">
Rooms
</li>
<li class="nav-item">
Spa
</li>
<li class="nav-item">
Casino
</li>
<li class="nav-item">
Dining
</li>
<li class="nav-item">
Entertainment
</li>
<li class="nav-item">
Luxury Packages
</li>
<li class="nav-item">
Weddings
</li>
<li class="nav-item">
Contact Us
</li>
<li class="nav-item">
FAQ
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
The issue is that you are trying to load image that is too big into your nav-bar and then you are setting height and padding which are not neccessary. Simply resize image to fit your navbar.
Change width="80" height="80" and it will work.
I am new to bootstrap and I need to use bootstrap 4 for creating a fully responsive menu. The main navigation should use bootstrap collapsible navbar to show a hamburger icon atthe smaller screen widths. I found a smaple code from w3 which gives me a menu in the right side and when I resize to small view the harmber icon (the toggle view) appears on the right side:
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="navbar-brand"></div>
<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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
if I remove the dummy <div class="navbar-brand"></div> just before the toggle button then in small screens view, the toggle button would jump to left rather right.
What is the proper way of setting the alignment of toggle button to right instead of left without using the dummy hacky div
<div class="navbar-brand"></div>
Thanks for your help.
Try this Jsfiddle link.
Here I have applied justify-content: flex-end !important; css rule for navbar.
.navbar {
justify-content: flex-end !important;
}
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<!-- <div class="navbar-brand"></div> -->
<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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
I created a two navigation bars using bootstrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="style" href="css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Klevin's</title>
</head>
<body>
<!-- ISLANDWIDE DELIVERY message -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-center" id="topmessage">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">ISLANDWIDE DELIVERY</a>
</li>
</ul>
</nav>
<!-- Actual navigation bar -->
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light" id="mainnavbar">
<!-- Brand -->
<a class="navbar-brand" href="/ecommercewebsite/index.php">Klevin's</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Shop
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Shoes</a>
<a class="dropdown-item" href="#">Handbags</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
then I wanted to change the background color of the second navigation bar. So I put following code in main css file
body{
padding-top: 50px;
}
#mainnavbar{
background-color: #CC0000;
}
But it doesn't change the color. I'm doing this according to this tutorial video.
https://www.youtube.com/watch?v=C1phgYAzIfg&t=1066s
In his video it works correctly. But it doesn't work for me. I'm using a newer version of bootstrap. So not sure whether it is the reason.
Remove the bg-light. Since it uses an !important modifier it's overriding your CSS. You'll also want to use navbar-dark or navbar-light to give the Navbar content (links) a light or dark color.
<nav class="navbar navbar-expand-sm navbar-dark" id="mainnavbar"></nav>
#mainnavbar{
background-color: #CC0000;
}
Demo: https://www.codeply.com/go/gFgVhhsoRP
Replace your bg-light with navbar-light
<nav class="navbar navbar-expand-sm navbar-light" id="mainnavbar">
Why wont this work? I am sure i have set it up correctly although this is my first time using bootstrap. I am trying to use CDN distribution but I cant seem to get it to work. It currently just displays them as links as oppose to the nav bar that can be seen when used on other sites.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Fictional Football Club</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav navbar-nav">
<ul>
<li>News</li>
<li>Matches</li>
<li>Table</li>
<li>Squad</li>
<li>Tickets</li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
The navbar structure is not Bootstrap 4. Read the Bootstrap 4 navbar docs. Bootstrap 4 is now beta.
https://www.codeply.com/go/4GM7ligFGu
<nav class="navbar navbar-light bg-light navbar-expand">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">News</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Matches</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Table</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Squad</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Tickets</a>
</li>
</ul>
</nav>