So, my navbar is saved as a partial in a fairly straightforward express app. I have the navbar also included in a boilerplate wrapper which is being used on most pages, like so:
<h1>HELLO<h1>
and in the boilerplate file I have
<%- include("../partials/navbar")%>
The problem is that the navbar shows up but the two .svg images don't show on certain pages, which to my eye are using the exact same format. Does anyone have any ideas what the problem might be?
Also, please let me know if I can clarify anything - I'm quite fresh to coding so I'm a bit limited in my vocabulary.
Thanks in advance!
EDIT(nowhere near enough infomation, sorry):
here is the code for navbar partial:
<nav class="navbar navbar-expand-md sticky-top navbar-dark">
<img class="brand" src="logo.svg" alt="" />
<div class="container-fluid">
<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" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-link ms-3" href="/events">Upcoming Events</a>
<a class="nav-link ms-3" href="/events/new">New Event</a>
<a class="nav-link ms-3" href="/community">Community</a>
</div>
<div class="navbar-nav ml-auto rightLinks" id="navbarSupportedContent">
<% if(!currentUser) { %>
<p><%= currentUser %></p>
<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>
<p class="nav-link">
<%=currentUser.username %><img class="profileIcon" src="profile.svg"></img>
</p>
<% } %>
</div>
</div>
</div>
</nav>
and here is the boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style2.css" />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Anton&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Street Music</title>
</head>
<body class="flex-column">
<%- include("../partials/navbar")%>
<main class="containter vw-100"><%- body %></main>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"></script>
<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>
<!-- <script src="/javascripts/validateForms.js"></script> -->
</body>
</html>
Maybe I should mention that the pages in which the images show up are in the same directory, and the images themselves are in public.
Each file begins with <% layout("layouts/boilerplate") %> but it only displays the images on certain pages.
first:-
img tag doesn`t have a closed tag so this is wrong
<img class="profileIcon" src="profile.svg"></img>
you should delete the closed tag to be like that
<img class="profileIcon" src="profile.svg">
second:-
you mentioned that the images is in anther directory and you didn`t route them in src
src="profile.svg"
to make the route correctly there is two ways :-
first :-
src="../public/profile.svg"
second:-
if you use express ,you can do static file to your public file in server.js like so
app.use(express.static('public'))
and then you can route directly to the public directory
src="./public/profile.svg"
Related
My navbar is overlapping my content. All similar questions seems to have been solved by either (1) padding-top or (2) if padding-top is applied, make sure the custom.css is loaded after the bootstrap css. I have done both. I am using Django, and I know it is loading my custom.css because the background color is applied. I put my navbar in head when it didn't work the first time, it was in body before, but I was thinking the padding-top might be applied to that as well. Anyways, please help make it work! Here is my code:
base.html
<head>
{% load static %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'main/custom.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'main:index' %}">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{% url 'main:index' %}">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</body>
custom.css
body {
background-color: #242627;
padding-top: 100px;
}
a { color: inherit; }
Instead of padding top you should go about giving it margin-bottom instead. You are trying to keep the navbar and the top and rest of the content below it. So give the navbar a margin-bottom to keep the other content down. Also dont give it to the body! make a custom class like .custom and add it to the navbar.
By adding the padding-top to your body, you're adding it to the nav since that is in the body too. If you have a div below the nav in the chain of code, add the padding to that:
<div class="nav">
<!-- nav code -->
</div>
<div class="next-content"> <!-- APPLY PADDING-TOP TO THIS -->
<!-- code -->
</div>
I have the following image tag that I am trying to add to my site.
<a href="#Url.Action("Index", "core")" class="navbar-brand">
<img src="~/images/core.png" title="core" alt="additional title" />
</a>
I've tried to add this tag in both head as well as body tags of my _Layout.cshtml page and it ends up just below the header.Where should I add the tag so that it appears at the top left corner of the site?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - core</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
#Html.ApplicationInsightsJavaScript(TelemetryConfiguration)
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a asp-area="" asp-controller="core" asp-action="Index" class="navbar-brand">core</a>
</div>
<div class="navbar-collapse collapse">
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© 2017 - core Inc. - core</p>
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("scripts", required: false)
</body>
</html>
In the body but this would place the logo below the head.
<body>
<a href="#Url.Action("Index", "core")" class="navbar-brand">
<img src="~/images/core.png" title="core" alt="additional title" />
</a>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
.
.
.
I figured it out myself.It needs to go inside the <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<a href="#Url.Action("Index", "core")" class="navbar-brand">
<img src="~/images/core.png" title="core" alt="" />
</a>
<div class="container">
<div class="navbar-header">
try:
position:relative
top: (add here the amount of pixels)
another option is to use
position: absolute and change the logo's place, you may also send me a private msg and I'll try to help you more with more code/direct link to your site
I need to reuse the boostrap navbar on all pages so I been trying to have a single file for the menu and render it using a ng-include angularJS tag
The menu is this file /partials/top_menu.html
<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="index.html">EXAMPLE</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 navbar-right">
<li>
Quienes Somos
</li>
<li>
Organización
</li>
<li>
Servicios
</li>
<li>
Clientes
</li>
<li>
Galeria
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
And here is the index.html that tries to include that partial as the navigation menu of the page
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>TITLE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- 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]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div ng-include="'partials/top_menu.html'"></div>
</nav>
<body>
The problem is that the menu bar is not being render at all and the WebDeveloper console does not show any error or file missing
What am I doing wrong or if this is the wrong aproach to do it let me know can I achieve it
You need to add the ng-app to the body tag of your index.html
<body ng-app>
This is AngularJS bootstraping directive. Without this, the AngularJS process does not start.
And you need to do that for any html file that needs to use angularJS directives
Use this script may be it help you :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Must include Jquery file.
I know this has been asked but I can't fix it based on the answers as I've made the includes found in other threads. My dropdown in bootstrap navbar is not working. I find it very odd as other features like the menu for mobile are working. I will join the code below. Thank You!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />
<META NAME=“Version” CONTENT=“Plano R1” />
<title>Plano</title>
<script src="/scripts/jquery-latest.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
<script src="/scripts/jquery.jeditable.masked.js" type="text/javascript"></script>
<script src="/scripts/jquery.maskedinput-latest.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="/scripts/date.format.js" type="text/javascript"></script>
<script src="/scripts/jquery.floatThead.js" type="text/javascript"></script>
<script src="/scripts/PatientSearch.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-latest.css">
<link rel="stylesheet" type="text/css" href="/css/iPad.css">
<link rel="stylesheet" type="text/css" href="/css/cms.v2.css">
<link rel="stylesheet" type="text/css" href="/css/css3-buttons.css">
<link rel="stylesheet" type="text/css" href="/css/patients.css">
<link rel="stylesheet" type="text/css" href="/css/appointments.css">
<link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css">
<link rel="stylesheet" type="text/css" href="/css/base/jquery.ui.autocomplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<script src="../dist/js/bootstrap.min.js"></script>
</head>
<body>
<header class="noPrint">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 plano"> Plano </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" role="navigation">
<li><span class="icon icon33"></span><span class="">Agenda</span></li>
<li class="dropdown">
Répertoires<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Fournisseurs</li>
<li>Patients</li>
<li>Professionels</li>
</ul>
</li>
<li><span class="icon icon120">Tâches</li>
<li><span class="icon icon96">Réglages</li>
<li>Disponibilités</li>
<li><span class="icon icon3">Patient</li>
<li><span class="icon icon151">Déconnexion</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" id="searchboxappointment" name="searchboxappointment" placeholder="Rechercher un patient" class="form-control searchboxappointment searchengine " size="35" value="<?php echo isset($_POST['searchboxappointment']) ? $_POST['searchboxappointment'] : "";?>" />
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header
Your loading 2 versions of jQuery. Get rid of the 1.11.0 version.
<script src="/scripts/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I added your code to a codepen. HERE li It seems to be working for me. Perhaps your problem is somewhere else.
Have you checked if those CDN resources are actually providing you with their libraries or even connecting online with your site? Are working off your server in offline mode? If you are, the CDN references will not connect.
I would save those CDN references inside your root. They are great for testing purposes, but they are not meant to be permanent resources. If their server goes down, so will your site. Not to mention, you can't modify the code in them, should you needed to do so.
I'm new to bootstrap, i'm working with the last version. I want to do a simple site, to get to know bootstrap, but already have a problem, that I can't solve. The navbar and the icon appears to be ok, but when I click, nothing happend. I have put my complete code bellow.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<script src="js/bootstrap.js"></script>
</head>
<body>-->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Site name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<nav class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
I am somewhat new to using Bootstrap as well and I think I may have found some answer to your problem. It looks like you downloaded all the libraries but you may not have included all the jquery, JS, and Popper.js links in your head.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
It happened to me too because I didn't link all the libraries. So check to see if there aren't any libraries you didn't refer to in your head.
PS: Sorry I don't use the downloaded version of the libraries so I can't tell you specifically which files and libraries to select.
Hope it helps still ;)