why do my header wont stay at an specific height and a fluid width-CodePudding

how do i make my header vertically the same even if changing its contents? and how do i make the "minhas reservas" vertically centered? i still do not get the whole absolute,relative,etc position

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@@@</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Dependencia BS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

</head>
<body style="background-color:#e6e6e6;">
    <div >
        <div >
            <div >
                <img id="logo" src="@@" alt="" width="154" height="32">
            </div>
            <div >
                <a  id="navdrop" role="button" data-toggle="dropdown" data-hoover="dropdown" style="font-family">
                Minhas Reservas
                </a>
            </div>
        </div> 
    </div>
</body>
</html>

and heres my css(theres things with no purpose bc the html here is not complete:

.header-right{

}
nav {
    background: rgb(45, 123, 212)
    
}
iframe{
    position: ;
}
.navbar {
    position:absolute;
    overflow:hidden;
    background: rgb(0,138,193);
    background: linear-gradient(180deg, rgba(0,138,193,1) 0%, rgba(0,40,135,1) 100%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.nav-item::after{content:'';display:block;width:0px;height:2px;background:#ffffff;transition: 0.2s;}
.nav-item:hover::after{width:100%;}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color:#fec400;}
.nav-link{padding:15px 5px;transition:0.2s;}
.dropdown-item.active, .dropdown-item:active{color:#212529;}
.dropdown-item:focus, .dropdown-item:hover{background:#ffffff;}

#box{
    background-color: rgba(16, 106, 180, 0.699);
    border: 1px salmon;
    width: 900px;
    height: 500px;
    position:absolute;
    margin-top: 40px;
    
}
.navdrop{
    margin-top: 57;
}

CodePudding user response：

You can do it like this

.header-right {}

nav {
  background: rgb(45, 123, 212)
}

iframe {
  position: ;
}

.navbar {
  position: absolute;
  overflow: hidden;
  background: rgb(0, 138, 193);
  background: linear-gradient(180deg, rgba(0, 138, 193, 1) 0%, rgba(0, 40, 135, 1) 100%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-item::after {
  content: '';
  display: block;
  width: 0px;
  height: 2px;
  background: #ffffff;
  transition: 0.2s;
}

.nav-item:hover::after {
  width: 100%;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #fec400;
}

.nav-link {
  padding: 15px 5px;
  transition: 0.2s;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #212529;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background: #ffffff;
}

#box {
  background-color: rgba(16, 106, 180, 0.699);
  border: 1px salmon;
  width: 900px;
  height: 500px;
  position: absolute;
  margin-top: 40px;
}

.navdrop {
  margin-top: 57;
}

.btn-lg {
  padding: 0 !important;
  line-height: 0 !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="index.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@@@</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- Dependencia BS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

</head>

<body style="background-color:#e6e6e6;">
  <div >
    <div >
      <div >
        <img id="logo" src="@@" alt="" width="154" height="32">
      </div>
      <div >
        <a  id="navdrop" role="button" data-toggle="dropdown" data-hoover="dropdown" style="font-family">
                Minhas Reservas
                </a>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Here you go...

Regarding height:

Add the following CSS: .navbar { min-height: 20vh; } (Adjust the height as desired.)

Regarding vertical alignment:

Change

<div >

See the snippet below.

.header-right {}

nav {
  background: rgb(45, 123, 212)
}

iframe {
  position: ;
}

.navbar {
  position: absolute;
  overflow: hidden;
  background: rgb(0, 138, 193);
  background: linear-gradient(180deg, rgba(0, 138, 193, 1) 0%, rgba(0, 40, 135, 1) 100%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  min-height: 20vh;
}

.nav-item::after {
  content: '';
  display: block;
  width: 0px;
  height: 2px;
  background: #ffffff;
  transition: 0.2s;
}

.nav-item:hover::after {
  width: 100%;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #fec400;
}

.nav-link {
  padding: 15px 5px;
  transition: 0.2s;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #212529;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background: #ffffff;
}

#box {
  background-color: rgba(16, 106, 180, 0.699);
  border: 1px salmon;
  width: 900px;
  height: 500px;
  position: absolute;
  margin-top: 40px;
}

.navdrop {
  margin-top: 57;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="index.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@@@</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- Dependencia BS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

</head>

<body style="background-color:#e6e6e6;">
  <div >
    <div >
      <div >
        <img id="logo" src="@@" alt="" width="154" height="32">
      </div>
      <div >
        <a  id="navdrop" role="button" data-toggle="dropdown" data-hoover="dropdown" style="font-family">
                Minhas Reservas
                </a>
      </div>
    </div>
  </div>
</body>

</html>