Apply stylesheet - css

I have this bootstrap html code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Our Service
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">service2</a>
<a class="dropdown-item" href="#">service 2</a>
<a class="dropdown-item" href="#">service 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Call</a>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>
I want to add stylesheet in the below line to make the text "Home" look white. Kindly help.
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
Kindly help me to apply stylesheet in the above line to make the test look white. I need to apply white color on this.


Add on your Home text-light. I change the background to dark so the home to be visible
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-dark navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link text-light" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Our Service
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">service2</a>
<a class="dropdown-item" href="#">service 2</a>
<a class="dropdown-item" href="#">service 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Call</a>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>

Related

How to fix overlapping navbar dropdown on right side navbar using app.css of react js

I got confuse on this app.css of built css of react js. why my navigation dropdown overlap on the right side. for the reference please see my uploaded image. currently I used react js and laravel for development. I don't find any solution for this. is there any one experience this same with me?
Html Code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a class="navbar-brand" href="#">Navbar</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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Thank you.

we need to change css
#navbarSupportedContent {
.navbar-nav {
li.nav-item:last-child {
.dropdown-menu {
right: 0;
left: auto;
}
}
}
}

Add dropdown-menu-right class in your dropdown-menu class. It will solve your problem.
<div class="dropdown-menu dropdown-menu-right">

Bootstrap navbar alignement issue

Any suggestions how to get the alignement of the navbar correct?
The logo is not in the middele and the menu is pushed to the right.
Check also: https://torza.nl/rsw2
<div class="row">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
</div>
After the changes suggested by Aleksandr Belugin it looks like (still not centered)

Your HTML STRUCTRURE should be as following
<header class="header-container">
<div class="row justify-content-between align-items-center">
<div class="col">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="mailto:info#rotterdamsteelworks.nl"
style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i>
<span>Send email</span>
</small></a> </li>
<li class="nav-item"> <a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i
class="fas fa-phone-volume"></i>
<span>+31 (0) 184-632456</span>
</small></a> </li>
</ul>
</div>
<div class="col-auto">
<a class="navbar-brand" href="index.php"><img class="img-fluid d-block" src="img/logo.png"
alt="Rotterdam Steel Works"></a>
</div>
<div class="col">
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_metaalunie.png" width="45" alt="Metal Union"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png"
width="45" alt="CE NEN EN1090"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png"
width="45" alt="Lloyds stamp authorized"></a></li>
</ul>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
</div>
<nav class="row menu-container justify-content-center">
<div class="col-auto">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>
<span>Home</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>
<span>About us</span>
</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>
<span>Services</span>
</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>
<span>Markets</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>
<span>Certification</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>
<span>Media</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>
<span>Contact</span>
</strong></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Your CSS style should be
.header-container .navbar-brand {
width: auto;
height: 100%;
}
Suggestions -> Don't use font tag, instead use css to style font. its way long back old method to style html element.
Always use HTML5 Semantic tags. :)

Remove flex-grow:1 from .navbar-collapse or add flex-grow-0 class.
and justify content property- justify-content:space-between or add justify-content-between class.
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1; /*Remove this property */
-ms-flex-align: center;
align-items: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between; /* add this property */
margin-right: -15px;
margin-left: -15px;
}
To align the menu towards right add float-right class.
<div class="row justify-content-between align-items-center float-right
">
<div class="navbar-collapse collapse show" id="navbarResponsive" style="">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>

As you resolved the first one for centering the menu just add class
justify-content-center on your second header parent
<div class="collapse justify-content-center navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>

Using bootstrap add to left <ul> after brand, class justify-content-end and if you want your menu also to be centered add class justify-content-center to div, what surrounds <ul class="navbar-nav">
Also your could add some bottom space to brand to separate it from menu by adding class, for example , mb-3 to it
Should be something like this
<div class="row">
<ul class="collapse navbar-collapse navbar-nav">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand mb-3" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav justify-content-end">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>

How i change the position more to the left in the navbar-toggler Bootstrap?

I intend to slightly change the navbar-toggler-icon more to the left and their respective menus as well. I have already tried to change the position in the css but this only changes the icon shown in the image and the menus are exactly the same. Could they help me? Thank you.
https://imgur.com/MZBGbCC
Code of the menu:
<span></span>
<div class="menu">
<nav class="navbar container-fluid navbar-expand-lg navbar transparent">
<button class="navbar-toggler navbar-toggler-right" id="menu_colapso" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="conteudo/menu.png" id="imagem_icon"></span>
</button>
<a class="navbar-brand">
<img src="conteudo/asus.png" class="collapse navbar-collapse" id="imagem_logo">
</a>
<div class="collapse navbar-collapse pr-5 mt-5" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto"> <!--mr-auto para voltar ao lado esquerdo-->
<li class="nav-item">
<a class="nav-link" id="linhaactiva" href="inicio">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="destaques">Destaques</a>
</li>
<li class="nav-item">
<a class="nav-link" href="museu">Museu</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Urgeiriça</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="historia">Cronologia</a>
<a class="dropdown-item" href="bairro">Bairro Mineiro</a>
<a class="dropdown-item" href="minas">As Minas</a>
<a class="dropdown-item" href="processamento">Processamento</a>
<a class="dropdown-item" href="ambiental">Impactos Ambientais</a>
<a class="dropdown-item" href="saude_publica">Saúde Pública</a>
<a class="dropdown-item" href="recuperacao">Recuperação Ambiental</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mineiros</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="laborais">Condições Laborais</a>
<a class="dropdown-item" href="impacto_saude">Impacto na Saúde</a>
<a class="dropdown-item" href="mural">Mural</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Associação</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="fundacao">Fundação</a>
<a class="dropdown-item" href="objectivos">Objectivos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="informacoes">Informações </a>
</li>
<li class="nav-item">
<a class="nav-link"> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PT</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="#">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</div>

padding-left:0 is what you're looking for...
You can do it on the toggler... which moves it left a little (class: pullToLeft)
You can do it on the nav... which moves it left little more (class: pullNavLeft)
I replaced the image you had so that I and other people on stack overflow can see the effects in action; working snippet below:
.pullToLeft {
padding-left: 0 !important;
}
.pullNavLeft {
padding: .5rem .3rem !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="menu">
<nav class="navbar container-fluid navbar-expand-lg navbar transparent pullNavLeft">
<button class="navbar-toggler navbar-toggler-right pullToLeft" id="menu_colapso" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="https://www.akberiqbal.com/favicon.ico" class='img-fluid ' id="imagem_icon"></span>
</button>
<a class="navbar-brand">
<img src="conteudo/asus.png" class="collapse navbar-collapse" id="imagem_logo">
</a>
<div class="collapse navbar-collapse pr-5 mt-5" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!--mr-auto para voltar ao lado esquerdo-->
<li class="nav-item">
<a class="nav-link" id="linhaactiva" href="inicio">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="destaques">Destaques</a>
</li>
<li class="nav-item">
<a class="nav-link" href="museu">Museu</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Urgeiriça</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="historia">Cronologia</a>
<a class="dropdown-item" href="bairro">Bairro Mineiro</a>
<a class="dropdown-item" href="minas">As Minas</a>
<a class="dropdown-item" href="processamento">Processamento</a>
<a class="dropdown-item" href="ambiental">Impactos Ambientais</a>
<a class="dropdown-item" href="saude_publica">Saúde Pública</a>
<a class="dropdown-item" href="recuperacao">Recuperação Ambiental</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mineiros</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="laborais">Condições Laborais</a>
<a class="dropdown-item" href="impacto_saude">Impacto na Saúde</a>
<a class="dropdown-item" href="mural">Mural</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Associação</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="fundacao">Fundação</a>
<a class="dropdown-item" href="objectivos">Objectivos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="informacoes">Informações </a>
</li>
<li class="nav-item">
<a class="nav-link"> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PT</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="#">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>

BootStrap dropdown menu hides behind the screen

I'm using BootStrap v4.3 and I have problem with dropdown menu in navigation, it hides after right side of screen:
image of this dropdown
I speak straight away that adding negative margin-left won't work because it breaks on mobile devices then.
<nav class="navbar navbar-dark bg-primary navbar-expand-md">
<a class="navbar-brand" href="index.php" >
Nazwa
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-bar1" aria-controls="navbar-bar1" aria-expanded="false" aria-label="Przełączanie nawigacji" >
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbar-bar1" >
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Strona główna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 3</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Zaloguj się lub zarejestruj</a>
</li>
<li class="nav-item dropdown">
<a id="navbar-subbar1" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Przełączanie menu konta" aria-haspopup="true" ><i class="fas fa-user"></i> Nacioszeczek</a>
<div class="dropdown-menu" aria-labelledby="navbar-subbar1">
<a class="dropdown-item" href="#"><i class="fas fa-user-tie"></i> Narzędzia administracyjne</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-user"></i> Moje konto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-cogs"></i> Ustawienia</a>
<a class="dropdown-item" href="#"><i class="fas fa-key"></i> Zmień hasło</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Wyloguj</a>
</div>
</li>
</ul>
</div>
</nav>

.dropdown-menu.show {
left: -98px;
}
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<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">
<nav class="navbar navbar-dark bg-primary navbar-expand-md">
<a class="navbar-brand" href="index.php">
Nazwa
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-bar1" aria-controls="navbar-bar1" aria-expanded="false" aria-label="Przełączanie nawigacji">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbar-bar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Strona główna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Strona 3</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Zaloguj się lub zarejestruj</a>
</li>
<li class="nav-item dropdown">
<a id="navbar-subbar1" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Przełączanie menu konta" aria-haspopup="true"><i class="fas fa-user"></i> Nacioszeczek</a>
<div class="dropdown-menu" aria-labelledby="navbar-subbar1">
<a class="dropdown-item" href="#"><i class="fas fa-user-tie"></i> Narzędzia administracyjne</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-user"></i> Moje konto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-cogs"></i> Ustawienia</a>
<a class="dropdown-item" href="#"><i class="fas fa-key"></i> Zmień hasło</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Wyloguj</a>
</div>
</li>
</ul>
</div>
</nav>

Bootstrap 4 - Navbar items outside the collapse

Ok so I have to admit this is something I have always struggled with getting to work correctly even in BS3. But I want to have navbar links outside of the collapsed container that stay persistent.
This is what I have right now:
<nav class="navbar fixed-top navbar-expand-lg navbar-template">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-youtube"></span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-linkedin"></span></a></li>
</ul>
</nav>
This works until the first nav is in a collapsed state. When the collapse is active it looks like this:
Has anyone found a clean solution for this?

The simplest way is using the flexbox utility classes, so no extra CSS is needed. Keep the items you always want to show out of the navbar-collapse div.
https://www.codeply.com/go/TWZGiy3VGw
<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
<a class="navbar-brand" href="#">Navbar</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Notice the use the responsive order-* classes to ensure the collapse menu items remain last (order-3) when in the collapsed/mobile breakpoint.

Resources