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>
Related
I have toolbar in my project. Suddenly list items are not being clicked on it since I have added area in project and moved controllers and views in respective folders.
Home and Category are not clickable. This is my code in _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RegistrationApp</title>
<link rel="stylesheet" href="~/css/BoostwatchTheme.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RegistrationApp.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" asp-area="Customer" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="Admin" asp-controller="Category" asp-action="Index">Category</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
This is _ViewImports.cshtml which is there in the both areas folder Admin and Category
#using RegistrationApp
#using RegistrationApp.Models
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
This is my project structure
These two Home and Category options are not getting clicked
How can I fix this issue ?
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>
How to increase height of menu bar in this code,
how decrease column size and height
how put a rich css for this design can anyone help me without any custom css.
in notice column data should display in that yellow color place only
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="newcss.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar" id="side1">Links</div>
<div class="col-md-8">
<div class="page-header">
<h1>Student Management System</h1>
</div>
<p class="lead">Home Page.</p>
</div>
<div class="col-md-2 sidebar" id="side2">notice</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
</html>
I didn't get your actual requirement, but menubar height can be increased by adding following CSS.
Note: This is a workaround, may not be responsive
.navbar{
height : 100px !important; /*keep your own height here*/
}
html, body {
margin:0;
padding:0;
}
.nav {
margin:0px;
}
.navbar{
margin-bottom:0px;
}
.header{
margin:0px;
padding:0px;
display:block;
vertical-align:middle;
width:100%;
}
<! 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="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css.css" rel="stylesheet" type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body >
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
<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 page-scroll" href="#page-scroll">Website</a>
</div> <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right" id="#myNavbar">
<li class="hidden"></li>
<li class="page-scroll">Home</li>
<li class="page-scroll">About</li>
<li class="page-scroll">Services</li>
<li class="page-scroll">Contact</li>
</ul>
</div> <!--ul-li-->
</div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Header-->
<header >
<div class="container" >
<div class="row">
<img src="work.jpg" class="img-responsive" >
</div>
</div>
</header>
<!--Header-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
I'm coding my first website there's some unwanted white space around the header image that won't go away.
I've checked all the usual solutions like setting margin and padding:0;display: block and width:100% but they don't seem to be working.
Could somebody please take a look at the code and let me know what I'm doing wrong?
Replace the
<div class="container"> to <div class="container-fluid">
and give your image
width= 100%.
Something like:
<style>
.width_full {
width: 100%;
}
</style>
<div class="container-fluid">
<div class="row">
<img src="work.jpg" class="img-responsive width_full">
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my garage</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<body>
<div class="navbar navbar-inverse" >
<div class="container">
<a href="#" class="navbar-brand" >MyGarage</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse" >
Rooms
</button>
<div class = "collapse navbar-collapse navHeaderCollapse" >
<ul class="nav navbar-nav navbar-right">
<li>Garage</li>
<li>Toilet</li>
</ul>
</div>
</div>
</div>
<h1> List of posts (yet ;) ) </h1>
<br /><br /><br /><br />
Add Post
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</head>
</html>
Can someone explain why the tag was not rendered in firefox? I'm playing with twitter bootstrap.
What I wanted was to have a drop-down button called "Rooms" in the nav-bar which drops down "Garage" and "Toilet"
Thankyou
replace this markup
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my garage</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<div class="navbar navbar-inverse" >
<div class="container">
<a href="#" class="navbar-brand" >MyGarage</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse" >
Rooms
</button>
<div class = "collapse navbar-collapse navHeaderCollapse" >
<ul class="nav navbar-nav navbar-right">
<li>Garage</li>
<li>Toilet</li>
</ul>
</div>
</div>
</div>
<h1> List of posts (yet ;) ) </h1>
<br /><br /><br /><br />
Add Post
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>