I currently am using bootstrap to create a navbar filled with links. One of the links I have is a button and the button is causing the other links to not vertically align properly.
body{
background: rgb(27, 25, 25);
}
.btn{
border-radius: 3em;
}
<!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.0">
<title>Adam Farrow </title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="data/styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-xxl">
<a href="#" class="navbar-brand">
<span class="fw-bold text-secondary">
Adam Farrow
</span>
</a>
<button class="navbar-toggler button" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav"
aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link " href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#skills-link">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#glider">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="https://github.com/Adamfarrow1/">Github</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
As you can see if you run the code, it will have the items slightly unaligned.
I have tried using "text-center" on the ul tag surrounding the problem. As well as I tried creating a class and using "top = 50%" for the items inside the list.
use padding-bottom or padding-top : 2px to position your github link
my scrollspy isn't working properly. It starts at home and can scroll down but when scrolling back up all tabs highlight except the "home" tab when you scroll all the way up. Additionally I've tried to include the data-bs-offset= "100" in my body tag but that has no effect on the scrolling. The tab changes to the next too early so I wanted to fix this with data-bs-offset. I'm pretty sure i've included the necessary cdn links for the css and js from the bootstrap website. Any suggestions?
<!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.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/8caef0b63d.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>Tatyana Chalik</title>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-smooth-scroll="true">
<!-- navbar -->
<nav class="navbar navbar-dark navbar-expand-lg fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-lg-3 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="resume.html">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
<header id="home">
<h1> hi </h1>
</header>
<main>
<div class="container" id="about">
<h2 class="pt-5 pb-4 text-center">About Me</h2>
<p class="pt-5 text-center"> jsdklajsdfljsdalkfjsdljflsdjflsdfljdf </p>
</div>
<div class="container" id="projects">
<h2>hi2</h2>
</div>
<div class="container contacts" id="contact">
<h2 class="text-center pt-5 pb-3">Contact Me</h2>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
Hello I found some similarity case with your case. And I try to help you with send the link below. You can read and choose the one which the case is close to your case. Thank you, hope it can help you. bootstrap offset scrollspy not working or How do I set the offset for ScrollSpy in Bootstrap? or this one data-offset in Bootstrap Scrollspy is not offseting at all
I use bootstrap to build a navbar of my website. And I open the website on computer and cellphone to try it. It works well on Samsung cellphone and also on computer. But when I open it on iPhone 8 and 6.
The navbar seems like covered by something . And it can't show well.
I think it might be something wrong about z-index or overflow . I try transform z index and let overflow be auto or visible . But they all can't work.
Here is my boilerplate
<!DOCTYPE html>
<html>
<head>
<title>YelpCamp</title>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale=1.0 maximum-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"
integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="/stylesheets/app.css">
</head>
<body class="d-flex flex-column vh-100">
<%- include('../partials/navbar')%>
<main class="container mt-5">
<%- include('../partials/flash.ejs') %>
<%- body %>
</main>
<%- include('../partials/footer')%>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js">/script>
<script src="/javascript/validateForm.js"></script>
</body>
</html>
And here is my navbar
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">YelpCamp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/campgrounds">Campgrounds</a>
<a class="nav-link" href="/campgrounds/new">New Campground</a>
</div>
<div class="navbar-nav ml-auto">
<% if(!currentUser) {%>
<a class="nav-link" href="/login">Login</a>
<a class="nav-link" href="/register">Register</a>
<% } else {%>
<a class="nav-link" href="/logout">Logout</a>
<% } %>
</div>
</div>
</div>
and CSS
nav{
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
overflow: visible;
}
.container-fluid{
transform:translateZ(1px);
overflow: visible;
}
And here is my whole app on GitHub
https://github.com/goodday2871/newyelpcamp
I deploy it on Heroku server. Here is the link
https://lit-shore-17312.herokuapp.com/
Thanks for any help and advice!!
https://upload.cc/i1/2020/11/22/xIt5LH.jpeg
Hi here is the image for my iPhone safari when I open my website.
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'),
]
I have a problem with BS3 navbar, when i change the size of the screen, navbar list items goes behind navbar brand image.
I would like navbar items to collapse into hamburger menu before they reach navbar brand. How can I achieve that?
Here is my HTML code:
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<!-- BS, JS, FONTS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- CSS -->
<link rel = "stylesheet" type = "text/css" href = "navbarProb.css"/>
</head>
<body id="index" data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- NAVBAR -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- MOBILE NAVBAR -->
<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 = "#listItem1">
<img src = "https://image.ibb.co/jN2AaV/logo.jpg">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>listItem1</li>
<li>listItem23</li>
<!-- DROPDOWN NAVBAR -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">listItem3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>listItem4</li>
<li>listItem5</li>
<li>listItem6</li>
<li>listItem</li>
<li>listItem</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">listItem<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>listItem7</li>
<li>listItem</li>
<li>listItem</li>
<li>listItem</li>
<li>listItem</li>
<li>listItem</li>
</ul>
</li>
<li>listItem8</li>
<li>listItem9</li>
<li>listItem10</li>
</ul>
</div>
</div>
</nav>
Thanks!
#j.b
Bootstrap converts the navigation to hamburger below 767px and in your expected scenario, it should convert after 1021px which is not possible if you want to make it possible you have to write a media query #media (max-width: 1021px) and your hamburger code.
let me know if you need anything.