am trying to making a simple UI in their I stuck, I want full width my input type but its showing short, can anyone tell me how can I make full it, and also I want responsive in mobile and desktop mode
Navbar.js
This is the navbar.js file where I wrote my UI part
import React from 'react'
import './Navbar.css';
import SearchOutlinedIcon from '#material-ui/icons/SearchOutlined';
const Navbar = () => {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm p-3 bg-white ">
<div className="container">
<a class="navbar-brand" href=""><img src="https://imgeng.jagran.com/images/2021/jan/Myntra-805x530-1-700x4611611985286383.jpg" alt="Mynta" className="coco mr-5" /></a>
<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">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link mr-2" href="#">MEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">WOMEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">KIDS</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">HOME & LIVING</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">OFFERS</a>
</li>
</ul>
{/* <div className='sidebar_search'>
<div className='sidebar_searchContainer'>
<SearchOutlinedIcon />
<input type='text' placeholder='Search for products brands and more' />
</div>
</div> */}
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search for Products Branda and More" />
</div>
</div>
</div>
</nav>
)
}
export default Navbar;
style.css
This is the style.css file where I wrote some css
#media (min-width: 1200px) {
.container{
max-width: 1400px;
}
}
.coco{
width: 60px;
}
.nav-item{
font-weight: bold;
color: black;
}
.nav-item, .nav-link {
font-size: 17px;
color: black;
}
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
input[type="text"] {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
/* .sidebar_search{
display: flex;
align-items: center;
height: 39px;
padding: 10px;
background-color: #f0f0f0;
margin-right: 100px;
width: 100%;
}
.sidebar_searchContainer > input {
border: none;
margin-left: 10px;
outline: none;
background-color:#f0f0f0;
} */
you could try this code:
CSS (not big changes)
#media (min-width: 1200px) {
.container{
max-width: 1400px;
}
}
.coco{
width: 60px;
/*border: 1px solid blue;*/
}
.nav-item{
font-weight: bold;
color: black;
}
.nav-item, .nav-link {
font-size: 17px;
color: black;
}
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
input[type="text"] {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
HTML (some changes)
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm p-3 bg-white ">
<a class="navbar-brand" href="">
<img src="https://imgeng.jagran.com/images/2021/jan/Myntra-805x530-1-700x4611611985286383.jpg" alt="Mynta" class="coco mr-5" />
</a>
<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">
<ul class="navbar-nav mr-auto flex-grow-1">
<li class="nav-item ">
<a class="nav-link mr-2" href="#">MEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">WOMEN</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">KIDS</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">HOME & LIVING</a>
</li>
<li class="nav-item">
<a class="nav-link mr-2" href="#">OFFERS</a>
</li>
</ul>
<div class="form-group has-search flex-grow-1">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search for Products Branda and More" />
</div>
</div>
</nav>
</div>
Explanation
The changes made are as follows:
in the tag with the class coco, I have renamed the class from
classname to class.
I have included the container-fluid which requires bootstrap 4 to make the menu wide. Otherwise there was no space to grow and it all came together. finally
I have applied flex, to give similar entities to the menu and to the search field. You can do this by adding the "flex-grow-1" class to each of the tags of both entities. If you want one to be greater than the other, you can remove that class from a tag and see what happens.
You can see this code running on pure css + html in the next link
Importante notice: I´m not familiar with react. So I changed from react code to pure thml + css code. But I´m assuming that you can understand as well.
Good luck!
Related
I'm trying to create a quite complex navbar using bootstrap. I wonder wether it is possible to make the dropdown menu floating, so it does not make the navbar big and ugly. The picture is quite self-explanatory:
Code:
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
#media screen and (max-width: 736px) {
.navbar-expand-lg .navbar-collapse {
flex-basis: auto;
}
.flex-derecha {
width: 250px;
position: absolute;
height: auto;
background: black;
top: 50px;
right: 0;
}
.collapse:not(.show) {
display: none !important;
}
.nav-item
{
width:250px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
I'm having a slight problem with the navbar-expand-md. From 768px to 992px the navbar height increases and the navbar-brand gets pushed a little down. It's a minor issue, but it's really bugging me and I can't seem to solve this problem. My skills are not to proficient so I'm at the end of my wit and would appreciate any help. Thanks in advance - happy holidays, stay healthy.
The issue described above can be seen here:
https://jsfiddle.net/w3do6z74/
Navbar-code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">brandname</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_history.png" class="category-bar">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_nature.png" class="category-bar">Nature</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_travel.png" class="category-bar">Travel & Food</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_arts.png" class="category-bar">Arts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_science.png" class="category-bar">Science</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_crime.png" class="category-bar">Crime</a>
</li>
<li class="nav-item">
<a class="nav-link nav-custom-link" href="#">HYPE</a>
</li>
</ul>
</div>
</div>
</nav>
Custom-Css:
.nav-custom-link {
font-weight: bold;
font-style: italic;
}
.navbar {
border-bottom: 1px solid black;
margin-bottom: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand {
font-family: 'Audiowide', cursive;
}
.category-bar {
padding-right: 4px;
}
.navbar-toggler {
padding: 0.2rem 0.55rem;
font-size: 1.1rem;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0;
}
If you check the CSS in dev tools, you can see that one of the things changing on the ul element is the bottom margin. It's 0.5rem by default and 0 if the minimum width is larger than 992px:
#media (min-width: 768px)
.navbar-expand-md .navbar-nav {
flex-direction: row;
}
.mb-2 {
margin-bottom: .5rem!important;
}
#media (min-width: 992px)
.mb-lg-0 {
margin-bottom: 0!important;
}
It's because you added mb-2 and mb-lg-0 classes to your ul element:
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
To fix this, you can add mb-0 and remove mb-lg-0:
<ul class="navbar-nav me-auto mb-0"></ul>
I'm using Bootstrap for my navigation bar, and somehow I keep getting whitespace on the right side of the logo image. My navigation code looks like this:
.navbar {
background-color: white;
opacity: 80%;
font-size: 0.8em;
}
.nav-link a {
color: black;
}
.nav-item img {
width: 110px;
margin-top: 8px;
margin-left: 10px;
margin-right: 20px;
}
.nav-item a {
color: black;
}
.navButtons {
background-color: white;
color: black;
padding: 6px;
font-size: 12px;
}
.navButtons:hover {
color: black;
text-decoration: none;
}
<style>
<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">
</style>
<nav class="navbar fixed-top navbar-expand-sm navbar-light">
<a class="navbar-brand" href="index.html" style="margin:0;">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 50%;">
</a>
<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="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="button navButtons" href="about.html"> Biography <span class="sr-only">(current)</span> </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="interiorDesigns.html"> Interior Design </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="arts.html"> Arts </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="blogs.html"> Blogs </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="contact.html"> Contact </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<div class="form-group mb-4">
<input type="search" placeholder="Search" class="form-control form-control-underlined">
</div>
</form>
</div>
</nav>
And this is what my logo looks like, the yellow part is where I want to get rid of. I tried changing the padding, margin, and width, but none worked.:
In your Example the Anchor tag is is a block element/parent container of the image.
Apply width and padding-right(if required) to the navbar-brand.
Then instead of adding 50% width make it 100% to the img tag inside.
This will fix your issue.
Example Code (last two lines) in CSS then tag:
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
width: 300px;
padding-right: 50px;
}
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 100%;">
When my navbar collapses the burger menu shows up. Whenever I click on it all the content below gets pushed down and leaves me with a messed up homepage.
My Navbar:
<section class="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"></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 ml-auto">
<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="#">Film</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
</ul>
</div>
</nav>
</section>
My CSS:
body{
text-align: justify !important;
}
#nav-bar{
position: fixed;
left: 0px;
top: 0px;
width: 100px;
}
.navbar-brand img{
height: 40px;
padding-left: 30;
}
.navbar-nav li{
padding: 0 10px;
}
.navbar-nav li a{
float: right;
text-align: left;
}
.nav-bar ul li a:hover{
color: #000000!important;
}
.navbar{
background: #fff;
}
.navbar-toggler{
border: none!important;
}
.nav-link{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
I have tried using the Z-Index method but no luck so far. Maybe I did something wrong?
https://jsfiddle.net/Lqzs1jdw/8/
Thanks in advance.
You have just make a typo, change the # to . will fix the issue
Example:
.nav-bar{
position: fixed;
width: 100%;
}
https://jsfiddle.net/aslamb/sfoavupd/2/
I am trying to build a website with Angular6 where there is a vertical navbar when viewed on a large screen and a top navbar with a dropdown on mobile. With Bootstrap 4. I have found multiple examples online but they all seems overly complicated or build without the nav template.
The example project from ASP.Net Core with Angular have a navbar like I want but it is written with Bootstrap3. I have tried to convert it without success and this is where I ask for your help!
Original Code with Bootstrap 3. If you have dotnet core installed, you can use dotnet new angular -o my-new-app to create the project.
HTML
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
<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' [routerLink]='["/"]'>my_new_app</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
<ul class='nav navbar-nav'>
<li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
<a [routerLink]='["/"]' (click)='collapse()'>
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]='["link-active"]'>
<a [routerLink]='["/counter"]' (click)='collapse()'>
<span class='glyphicon glyphicon-education'></span> Counter
</a>
</li>
<li [routerLinkActive]='["link-active"]'>
<a [routerLink]='["/fetch-data"]' (click)='collapse()'>
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
CSS
li .glyphicon {
margin-right: 10px;
}
/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
#media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
And here is my attempt to convert it. I used the Bootstrap 4 documentation for the template
<div class="main-nav">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</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="navbar-collapse collapse" id="navbarNavAltMarkup">
<div class="nav flex-column">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
The problem is that the title and the nav are on the same line instead of having then on separate line. How could I achieve that?
(The mobile view doesn't seem to work either, but I haven't tried yet. I am trying to make the desktop view work first)
Looks like I didn't search long enough. I found the solution here: http://www.codingflow.net/building-single-page-applications-on-asp-net-core-2-1-with-angular-6-part-2-upgrading-to-bootstrap-4/
One of the key changes was this in the css
.flex-column {
width: 100%;
}