I've been trying to figure this out for so long and I've finally given up... I've already defined a div and I would like to center some tabs in it, but nothing seems to work. Any suggestions?
HTML:
<section class="area">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
</ul>
</div>
</div>
</div>
</section>
CSS:
.area{
border: 2px solid #9A9A9A;
border-radius: 3px;
background-color: #FFFFFF;
height: 70%;
width: 75%;
margin: auto;
margin-bottom: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.nav-tabs > li {
float: none;
display: inline-block;
zoom: 1;
}
.nav-tabs {
text-align: center;
}
Thanks in advance.
There is a problem with your code , you have set width to area 75% the container width 1170px , container pull out the area div, thats why you got this problem, i just put the area div into container, please check with the snippet. i have solved your issue.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.area{
border: 2px solid #9A9A9A;
border-radius: 3px;
background-color: #FFFFFF;
height: 70%;
width: 100%;
margin: auto;
margin-bottom: 20px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
}
.nav-tabs > li {
float: none;
display: inline-block !important;
zoom: 1;
}
.nav-tabs {
text-align: center;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="area">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Put you parent class name before the bootstrap inbuilt classes. May b your css file is not overriding the bootstrap css file.
.area .nav-tabs > li {
float: none;
display: inline-block;
zoom: 1;
}
.area .nav-tabs {
text-align: center;
}
Try this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">
<center>TAB 1</center>
</a></li>
<li><a data-toggle="tab" href="#tab2"><center>TAB 2</center></a></li>
<li><a data-toggle="tab" href="#tab3"><center>TAB 3</center></a></li>
</ul>
In order to centrally align the tabs you need to add the following:
.area .nav {
text-align:center;
}
.area .nav-tabs>li {
float: none;
display:inline-block;
}
https://jsfiddle.net/tghLqu24/2/ - fiddle created for you to see it working.
Related
I'm new to this so apologies for any bad formatting and wrong terminology.
I'm trying to create a nav bar at the top of a page and have it the same width as my wrapper which is 1000px. I managed to get it to the center once but it didn't align with my wrapper and I cant even recreate that.
Any help at all would be appreciated, even if it doesn't directly answer my question
HTML:
<DOCTYPE html>
<head>
<link rel="stylesheet" href="navtest.css">
</head>
<html>
<body>
<header>
<div class="wrapper">
<nav class="topnav">
<ul class="topnavlist">
<li><a class="topnavlink">Menu 1</a></li>
<li><a class="topnavlink">Menu 2</a></li>
<li><a class="topnavlink">Menu 3</a></li>
<li><a class="topnavlink">Menu 4</a></li>
<li><a class="topnavlink">Menu 5</a></li>
<li><a class="topnavlink">Menu 6</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="wrapper">
<p>Main Text</p>
</div>
</main>
</body>
</html>
CSS:
.topnavlist {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.topnavlink {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
display: block;
float: left;
}
.topnavlink:hover {
background-color: #111;
}
header {
position: fixed;
top: 0;
width: 1000px;
}
.wrapper {
margin: auto;
width: 1000px;
position: relative;
}
body {
padding-top: 50px;
}
Do you mean like this?
.topnavlist {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
display:flex;
justify-content:center;
}
.topnavlink {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
display: block;
}
.topnavlink:hover {
background-color: #111;
}
header {
margin:0 auto;
top: 0;
width: 1000px;
}
.wrapper {
margin: 0 auto;
width: 1000px;
position:fixed;
top:0;
}
body {
padding-top: 50px;
}
html
css
<DOCTYPE html>
<head>
<link rel="stylesheet" href="navtest.css">
</head>
<html>
<body>
<header>
<div class="wrapper">
<nav class="topnav">
<ul class="topnavlist">
<li><a class="topnavlink">Menu 1</a></li>
<li><a class="topnavlink">Menu 2</a></li>
<li><a class="topnavlink">Menu 3</a></li>
<li><a class="topnavlink">Menu 4</a></li>
<li><a class="topnavlink">Menu 5</a></li>
<li><a class="topnavlink">Menu 6</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div>
<p>Main Text</p>
</div>
</main>
</body>
</html>
header {
margin:0 auto;
top: 0;
width: 1000px;
}
This part of the code was interfering with the positioning of the nav bar, removing it fixed the issue and didn't cause any other problems.
Description: I'm trying to create a navbar. I am using the
bootstrap 4 framework for
that but the problem is I have simply copied the simple navbar code without dropdown
and when I'm trying to create a custom dropdown then it is showing in the main menu due
to which the height of the main menu bar also increases. How can I show a sub-menu
outside the main menu bar?
*{
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: auto;
height: 100%;
}
ul li{
margin: 0;
/* border: 1px solid turquoise; */
width: 9em;
padding: 5px 0;
text-align: center;
position: relative;
}
/* Showing border bottom animation for the main-menu */
ul li::after{
content: '';
position: absolute;
border-bottom: 3px solid #f3007f;
transform: scale(0, 1);
transition: transform .5s ease;
width: 100%;
left: 0;
}
ul li:hover::after{
transform: scale(1, 1);
}
/* Showing background: black and font color:white when hovering over the main-menu */
ul li a {
display: block;
color: white;
}
ul li a:hover{
background-color: black;
color: white;
}
.logo {
width: 4vw;
}
/* Styling the main menu */
.navbarbg {
background: #10044a;
color: white;
font-weight: bold;
}
/* Centering the main-menu elements */
.listpos{
justify-content: center;
}
/* This code is for hiding sub-menus */
ul li ul li {
display: none;
}
/* This code is for showing sub-menus when hovering over main menu */
ul li:hover ul li {
display: block;
color: white;
}
<!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="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/f3e31b33a9.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbarbg">
<div class="col-md-2">
<img src="./images/ICC-Mens-T20-World-Cup-2021.jpg" class="img-fluid logo" alt="">
</div>
<div class="collapse navbar-collapse col-md-8 listpos">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Matches</a></li>
<li class="nav-item"><a class="nav-link" href="#">Standings</a></li>
<!-- This is the dropdown code Starting -->
<li class="nav-item">
<a class="nav-link">Dropdown</a>
<ul class="" aria-labelledby="navbarDropdown">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
</ul>
</li>
<!-- This is the dropdown code Ending -->
<li class="nav-item"><a class="nav-link" href="#">News</a></li>
<li class="nav-item"><a class="nav-link" href="#">Videos</a></li>
</ul>
</div>
<div class="col-md-2 text-right">
<b>Search</b>
<span class="ml-1">
<i class="fa-solid fa-magnifying-glass"></i>
</span>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
At the very top of your this is the dropdown is starting...
A very important dropdown class is missing from the li. It should read like this <li class="nav-item dropdown">.
Each of the links in the dropdown could then also use a class added too. Each of the links should contain class="dropdown-item"
Hopefully that will fix things but other people may spot things that I didn't.
Trying to get my UL to be horizontal, while also using CSS Grid. I basically have two columns than span the whole page and in the second one (on the right) I want to have my UL appear horizontally. I have tried both display: block and inline and neither seem to be having the desired effect.
Any ideas?
I have eliminated all my testing in the css, so currently there is no reference to the ul
HTML
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #3e2723;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
You should add the code the the list elements (li). Adding inline display to list (ul) will not change much.
Your problem has basically nothing do do with CSS Grid, since you're not using grid directly on the list.
Also there are many ways to do it, using display: inline, display: inline-block, using flexbox or even grid.
Solution using display: inline or display: inline-block
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul li {
display: inline;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
Solution using display: flex
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul {
display: flex;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
Solution using display: grid
(One way of doing it)
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
to get the <li> elements in the <ul> appear horizontally, you can simply add the following to the CSS, making <li> elements to display:inline-block or display:inline:
li{
display: inline-block;
}
I'm trying to make the links appear in the center and when I resize the page to show on mobile I want them to be placed next to each other.
Now there's 3 big blocks on top of each other on mobile. These have to be next to each other and smaller.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.container {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 32px 32px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
<div class="navbar">
<div class="row">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</div>
</div>
In the code I provided you can see the code of the html page and de CSS. The images contain the view of the mobile version and how it looks on a normal browser on my laptop.
<div class="navbar">
<ul class="row">
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
</u>
</div>
First of all, your code is incorrect.
There is no nav and ul tag, and your class navbar is in the wrong place.
Your list should be:
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</ul>
</nav>
Next, you need to change styles in your responsive CSS.
.navbar-nav{
text-align: center;
}
.nav-link{
display: inline-block;
}
Here is the reference:
https://getbootstrap.com/docs/4.3/components/navbar/
Cheers.
does anyone know how to achieve this in bootstrap for the nav? Logo on the left and nav on right.
My guess is you use col's with some css?
I managed to create the section i wanted the code i am using is:
CSS:
.menu {
background-color: lightblue;
overflow: hidden;
background-color:white;
}
.menu:after {
content: "";
border-bottom: 850px solid transparent;
border-right: 400px solid #0055b7;
position: absolute;
left: 80%;
top: 0;
}
.nav-menu ul {
list-style: none;
display: inline-flex;
}
.nav-menu ul li {
padding: 40px;
}
.blue-bg {
background-color: #0055b7;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="menu col-md-5">
<img class="paddingHeader" src="assets/images/headerlogo.png" />
</div>
<div class="content col-md-7 blue-bg">
<div class="nav-menu">
<ul>
<li><a class="text-white" href="">Home</a></li>
<li><a class="text-white" href="">About Us</a></li>
<li><a class="text-white" href="">Properties To Let</a></li>
<li><a class="text-white" href="">We Buy Houses</a></li>
<li><a class="text-white" href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>