asked    Marguerite     2018-10-22       html       88 view        2 Answers

[SOLVED] how to align correctly menu sandwich bootsrap 4

i have problems with my code to align correctly the menu sandwich in my header. The problem is that when i set my bowser width to minimum size, the menu sandwich is locate under the logo instead of to the right of the logo. Plus i want it to be at the very right of the header when the bowser is larger. I do research but i've problems to know how to manipulate this menu. The codes i saw are all about the same about the menu sandwich but it doesn't behave the way it's behaving in my site.

My code :

HTML

<!doctype html>
<html>
<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 href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href='' rel='stylesheet' type='text/css'>
    <link href='' rel='stylesheet' type='text/css'>
    <link href="" rel="stylesheet">
    <title>Rev'Iso entreprise de rénovation et d'isolation (rénovation énergétique) de votre habitat.  
    </title>
    <meta name="description" content="Rev'iso vous propose ses artisans pour la réalisation de différents travaux de rénovation et d'isolation dans 
    votre habitat avec des certication de qualité." />
</head>
<body>
    <div class="container-fluid" style="background:transparent url('images/fond_header8.jpg') no-repeat center center;min-height : 485px;">

                <div class="row" style="background:transparent url('images/bar.png') repeat-x;">
                    <!-- Taille 6 sur smartphones, 4 sur tablettes, 3 sur desktop et plus -->
                    <div class="col-xs-6 col-sm-4 col-md-3">
                        <img src="">
                    </div>
                    <!-- Taille 6 sur smartphones et tablettes, 7 sur desktop et plus -->
                    <div class="col-md-3 d-none d-lg-block">
                        <span class="textTel"> <img src=""/ width="95px" height="70px"> 09 82 52 79 04</span>
                    </div>
                    <!-- Masquée sur smartphones, taille 2 sur tablettes et plus -->
                    <div class="col-sm-7 col-md-6 hidden-xs" style="vertical-align:middle;">
                        <nav class="navbar navbar-expand-lg navbar-light bg-light">

                          <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">
                              <li class="nav-item active">
                                <a class="nav-link" href="">Accueil <span class="sr-only">(current)</span></a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Rénovation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Isolation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Devis</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Contact</a>
                              </li>
                            </ul>
                          </div>
                        </nav>
                    </div>
                </div>

CSS :

body{
background-color: C7C8C9;
width:100%;
margin:0px;
padding:0px;
}

.container-fluid { 
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom :0px;
  padding-top:0px;
}

.lienpage{
    background-color:ff5300;
    color:white;
    line-height:45px;
    text-align:center;
    width:260px; 
    border-radius: 12px;
    margin:auto;
    position : relative;
}

.lienpage:hover{
    background-color:EC9200;
}

.lienpage a{
color : white;
font-size: 17px;
}

.row {
    margin-bottom: 0px;
}

.row [class^="col-"] {
    padding-bottom: 0px;

}

.navbar-nav li{
    background : url(images/separateur.png) no-repeat;
background-position : left;
}

.navbar-nav li a {
 line-height: 80px;

}


.bg-light {

    background-color: transparent !important;
}


p {
    font-family: 'Cantarell', sans-serif;
    font-size: 18px;
    line-height: 25px;
    color : 398e9d;
    font-weight:bold;
}

.textTel {
    font-family: 'Droid Serif', Georgia, Times, serif;
    font-size: 22px;
    line-height: 80px;
    color : ff6400;
    font-weight:bold;
}

.texteBlanc {
    font-family: 'Cantarell', sans-serif;
    font-size: 18px;
    color : fff;
    font-weight:bold;
}

.greenbluetext {
    font-family: 'Cantarell', sans-serif;
    font-size: 26px;
    color : 006e71;
    font-weight:bold;
    text-align : center;
}

.textTel {
    font-family: 'Droid Serif', Georgia, Times, serif;
    font-size: 22px;
    line-height: 105px;
    color : ff6400;
    font-weight:bold;
}

.titreCategorieHome {
    font-family: 'Cantarell', sans-serif;
    color : FFF;
    font-size: 16px;
    font-weight:bold;
}

screenshots :

menu not align correctly

menu under

Thanks for the help.

  2 Answers  

        answered    Bradley     2018-10-22      

Honestly, there are too much code and hence it is somewhat difficult to explain what you should do. I hope this code snippet solves your problem. Comment if you have questions.

<link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row bg-light">
    <div class="col">
      <nav class="navbar navbar-expand-lg navbar-light  justify-contetn-sm-end px-0">
        <div class="row no-gutters w-100 align-items-center">
          <div class="col-auto col-lg-3">
            <a class="navbar-brand" href="">Logo</a>
          </div>
          <div class="col-auto col-lg-3">
            <span class="textTel"> 09 82 52 79 04</span>
          </div>
          <div class="col d-lg-none text-right">
            <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>
          <div class="col-12 col-lg-6">
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="">Accueil <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Rénovation</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Isolation</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Devis</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Contact</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>


        answered    Renata     2018-10-22      

I resolve the problem myself here's a code more correct for navbar.

<body>
    <div style="background:transparent url('images/fond_header8.jpg') no-repeat center center;min-height : 485px; position:relative;">



                    <!-- Masquée sur smartphones, taille 2 sur tablettes et plus -->

                    <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background:transparent url('images/bar.png') repeat-x;">

                        <div class="navbar-header">

                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

                        </button>
                        <a class="navbar-brand" href=""><span class="logo"><img src=""></span></a>
                        </div>


                          <div class="collapse navbar-collapse" id="navbarNav" style="position:absolute; right:100px;bottom:80px;">
                            <ul class="nav navbar-nav ml-auto">
                              <li class="nav-item active">
                                <a class="nav-link" href="">Accueil <span class="sr-only">(current)</span></a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Rénovation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Isolation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Devis</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="">Contact</a>
                              </li>
                            </ul>

                          </div>
                        </nav>

but i've just one problem left. I put a position relative on the first div and absolute on the menu to position the menu at the middle because the line-height didn't work anymore :

.navbar-nav li{
    background : url(images/separateur.png) no-repeat;
background-position : left;
}

.navbar-nav li a {
    color:blue;
 line-height: 80px;

}

Does anyone know why ? if nobody knows i'll keep this way. Thanks.





Your Answer





 2018-10-22         Rod

Stray characters seen at output of snprintf

I have a string creating function in C which accepts an array of structs as it's argument and outputs a string based on a predefined format (like a list of list in python).Here's the functiontypedef struct{ PacketInfo_t PacketInfo; char Gnss60[1900]; //and other stuff...} Track_json_t;typedef struct { double latitude; double longitude;} GPSPoint_t;typedef struct{ UInt16 GPS_StatusCode; UInt32 fixtime; GPSPoint_t point; double altitude; unsigned char GPS_Satilite_Num;} GPS_periodic_t;unsigned short SendTrack(){ ...
 c                     2 answers                     70 view
 2018-10-22         Chester

Ada Exceptions in Safety Critical Embedded Systems

I started learning Ada for its potential use in an embedded device which is safety critical. So far, I'm really liking it. However, in my research on embedded programming, I came across the hot topic of whether to use exception handling in embedded systems. I think I understand why some people seem to avoid it:depending on its implementation it can introduce either run-time overhead or larger code size (mentioned here under "Implementation")the time it takes to execute exceptions can be non-deterministic (one of several sources I saw)Now my question is, Does the Ada languag...
 exception-handling                     2 answers                     65 view
 2018-10-22         Wanda

How to change button text color using Hexa-decimal color value?

How to change button text color On Clicking the button using hexa-decimal value? I'm using the below code on MainActivity but not working button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // button.setTextColor(Color.GRAY); button.setTextColor(Color.(#808080)); } }); Try this: button.setTextColor(Color.parseColor("#ff0000")); ORbutton.setTextColor(0xff0000); //SET CUSTOM COLORORbutton.setTextColor(getApplication().getResources().getColor(R.color.red)); //TAKE DEFAULT COLOROR<But...
 java                     6 answers                     65 view