I am new to Thymeleaf and I'm simply trying to include a navigation bar in my pages.
I tried to use the code sample from the Thymeleaf documentation, some code samples from SO and from other websites but everytime the navigation bar doesn't display. However, I can see a menu, but this is not what I want.
header.html :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>navbar</title>
</head>
<body>
<nav th:fragment="navbar" class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" th:href="#{/}">Homepage</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" th:href="#{/itinerary}">Itinerary</a></li>
</ul>
</div>
</nav>
</body>
</html>
index.html :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<div th:replace="fragments/header"> </div>
</body>
</html>
file structure :
templates
fragments
header.html
index.html
I was expecting to see a navigation bar, but this is the result :
result
Related
Hi I am trying to develop navigation bar in CSS. I am very new to CSS but I tried some way in my react/type script application. Below is my expectation.
In the above image, left side project name and right side company logo. In between I need dropdown which has two options. I tried as below.
public render() {
return (
<div id="header">
<div style={{ overflow: "hidden", backgroundColor: "#f1f1f1", padding:"20px 10px" }}>
</div>
</div >
);
}
Which simply display small image with grey color. I am really trying hard to get this done. Can someone help me how can I write CSS and HTML for this. Thanks
If you need CSS + HTML implementation you can have a look at bootstrap Navbar for this. Bootstrap Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Your Logo</li>
</ul>
</div>
</nav>
</body>
</html>
I am making a forum and faced with the problem that the top navigation bar overlaps the text on all pages of the site. Am I missing something?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Forum</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand navLogo" asp-controller="Home" asp-action="Index"></a>
</div>
<div class="navbar-collapse collapse">
//Panel code
</div>
</div>
</nav>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
My Nav bar is not displaying properly.the menus are stacking over another.Could anyone please help me to rule out the issue.i'm attaching the codes i used and also the current display of navbar in browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>New Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap-4.1.3/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="index.html">New WebSite</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Education</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
i have written the following basic HTML code including bootstrap 3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Title</title>
<!-- Bootstrap Core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Style for this page -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div id="site-wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">MEDIFAKTOR server</a>
</div> <!-- Navbar Header -->
</nav>
</div> <!-- Site Wrapper -->
</body>
</html>
But whatever I change, the title is being displayed in the Body of the document as well. I checked for missing tags. Do I miss something else?
Close your viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The code below is displaying correctly in one line in both FF and IE but Chrome for some reason is displaying it in two lines as if both span and button elements had "display:block;". While I see that span has indeed computed display as block (because of the "float: left" as I could read elsewhere), but button has computed display as "inline-block" so it would seem that it should be rendered next to span and not below it.
It seems to behave like this with any version of Bootstrap >= 3.
Can anybody tell me why does Chrome behaves like?
(And I'm not asking how to place those element next to each other - I already found out that it works correctly when using ul and li elements)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<link href="bootstrap-3.1.1/dist/css/bootstrap.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-3.1.1/dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="nav navbar-nav">
<span class="navbar-text">User Name</span>
<button type="button" class="btn btn-default navbar-btn">Log out</button>
</div>
</div>
</nav>
</body>
</html>
When I look at the documentation: http://getbootstrap.com/components/#navbar I see that the class="navbar navbar-nav" goes into a ul, so I tried it this way and it is working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li><span class="navbar-text">User Name</span></li>
<li><button type="button" class="btn btn-default navbar-btn">Log out</button></li>
</ul>
</div>
</nav>
</body>
</html>