Rails navbar color not changing completely Bootstrap - css

I'm new in rails, so far I'm stuck trying to change the color of the navbar.
I have read almost everything about the subject and I haven't seen anything like my case.
As you can see in the pictures, the navbar changed to the color I wanted but for some reason the corners are still in black and also the background of my dropdown menu still in black.
Well I cannot upload pictures because I'm new here.
The github repository is at https://github.com/nanurbina/janus.git
I hope someone can give me a hand.
Here is my code on _navigation.html.erb
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'Janus BPO', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
</div>
and the code on the css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
.navbar-brand {
font-size: inherit;
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-collapse
{
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-inverse .container {
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
Thanks!

Replace navbar-inverse with myNavbar on your html and add the following to your CSS:
.myNavbar {
background-color: #ccc;
color:#222;
border: 1px solid #333;
}
Just change the color codes to what you want and you're good to go.

Related

How an I change the Bootstrap 5 navbar button border and icon color?

I need to use custom colors (#760822) on the Bootstrap 5 navbar menu button.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle">
<span class="navbar-toggler-icon"></span>
</button>
.
.
.
</div>
</nav>
I have achieved to update the default border-color to #760822 by doing this:
.navbar-light .navbar-toggler {
border-color: #760822;
}
Does anyone know how to change the fat border color when the menu is clicked, and how to change the color of the 3 horizontal lines inside it?
.navbar-light .navbar-toggler {
border-color: #760822;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
On bootstrap 5, the thick border is due to the following CSS class, and specifically to the box-shadow style:
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 0.25rem;
}
Without changing the original Bootstrap class, I have overridden it as follows, in my custom CSS file, that I load after the bootstrap CSS file:
.navbar-toggler:focus {
box-shadow: 0 0 0 0;
}
You just need a more specific selector. This could be because you're loading your custom styles before Bootstrap's stylesheet. Often adding body to the front does the trick, but reversing load order may also resolve the issue.
Because the icon is an SVG file it can't be simply changed via CSS. You'd need to switch to a Font Awesome icon, for example, and style that with the color property. See How can I change the Bootstrap 4 navbar button icon color?.
body .navbar-light .navbar-toggler {
color: #760822;
border-color: #760822;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarMenu" aria-controls="navbarMenu"
aria-expanded="false" aria-label="Toggle">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>

Bootstrap 4.5.0: My Toggle Button Appears Just to the Right of my Brand Image/Name?How Do I Position it to the Left?

I have a problem where the toggle button appears just to the right of my brand image. The same thing happens if I use a brand name. This is what it looks like.
I want the toggle to look like this.
I have searched for solutions but all of them are dealing with earlier versions of Bootstrap. I started having the problem when I upgraded the Bootstrap gem to 4.5.0.
Here is my html code.
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fas fa-bars"></i>
</button>
<%= link_to image_tag("ibraini_navbar.png", class: "img-fluid navbar-brand", alt: "#{t :page_title_home}"), home_path %>
</div>
Here is the related CSS code. I didn't include the code where I set the height of the navbar to adjust the size of the image.
.navbar-custom .navbar-brand, .navbar-custom .navbar-header, .navbar-custom .navbar-nav { a { color: $linkColorHeader; } a:hover, a:focus { text-decoration: none; color: $linkColorHover; } }
.navbar-custom .navbar-toggler { color: $linkColorHover; #include font-size(24px); border-radius: 2px; padding: 0 4px; }
.navbar-custom .navbar-toggler:hover, .navbar-custom .navbar-toggler:focus { background-color: #599ed7; color: $linkColorHeader; }
.navbar-custom .navbar-brand .navbar-toggler:focus, .navbar-custom .navbar-brand .navbar-toggler:active, .navbar-custom .navbar-brand:focus { outline: 0; }
I have the same problem if I use a brand name. The toggle is still positioned just to the right of the name.
I have similar html and css code in the other program that is working like the second picture.
I checked the current documentation and it says that the toggle goes to the left by default which is what I want. I have never had this problem with a toggle. Hopefully there is something that I'm not seeing that can be easily fixed.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand text-light" href="#">
<img src="" alt="logo-here" style="width:40px;"> Brand Name
</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="#">Link Here</a>
</li>
</ul>
</div>
</nav>
I took another look at the Bootstrap documentation. I realized that class 'navbar-header' no longer exists in Bootstrap 4.5.0. I rewrote my markup to look like the documentation found here.
The markup in my question is gone. Here is my new code.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fas fa-bars"></i> </button>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<%= link_to locale_root_path(anchor: "overview"), class: "navbar-brand page-scroll" do %>
<span class="text-red">Light</span><span class="text-blue">Be Corp</span>
<% end %>
......
</div>
</nav>
I have the toggle to the left without the brand name as expected. All of my websites will need to be modified. That's why my second image shows the brand name.

navbar disappears at medium (768px) - bootstrap 3.3.7

I have two navbars on my page. The first one is working, but the second one is not.
I have the following code for the 2nd one:
<nav class="navbar navbar-default">
<!-- <div class="container-fluid"> -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<span class="hidden-md hidden-lg"><a class="navbar-brand" href="#"> PRODUCTS >> </a></span>
<button type="button" class="navbar-toggle1 collapsed" data-toggle="collapse" data-target="#cat-nav-mega">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="cat-nav-mega">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
SCOTTCREW'S OWN SILICONE MOLDS <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu megamenu" role="menu">
<li>
The actual working page can be seen at (The site is currently in development and not a live site):
https://www.scottcrewcandlesupply.com/agoracart55/agora.cgi?keywords=books#
Can anyone tell me why the navigation doesn't show at medium and how I
can fix this?
Thanks!
on you main css class you have this :
your cat navbar will be hidden if screen size is blower than 1200px based this css code on responsive.css :
#media (max-width:1200px)
{
.navbar-collapse.collapse
{
display: none!important;
}
}
so your first navbar has a responsive css and is visible only if screen is more than 1200px.
and about second navbar :
if only screen is more than 768px, it would be shown in style.css
#media (min-width: 768px) {
navbar-toggle1 {
display: none;
}
So there is a gap between this two #media size , and there will be no navbar if screen is more than 768px and less than 1200px.
Anyway for fixing the navbar you asked do these steps:
1-
.navbar-toggle1 { // at style.css line 68
display: none;
}
2- add hidden-lg to this :
<`a href="#" class="navbar-brand hidden-lg"> PRODUCTS >> </a>`
3- and hidden-lg to this
<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
class="navbar-toggle1 collapsed hidden-lg">
4- remove hiden-md and add a new class name like navbarNew
finaly they they have to be like blow:
<span class="navbarNew"><a href="#" class="navbar-brand hidden-lg">
PRODUCTS >> </a></span>
And
<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
class="navbar-toggle1 collapsed hidden-lg">
And it would works Fine:)

change button border color when the button is being clicked and after

What to do to change navbar-toggle button behaviour when the button is being clicked and after?
It gets some blue border color.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</div>
</div>
</nav>
It might be this, bootstrap has some automatic styling for .navbar-toggle. You can add something like below to counteract it's default styling.
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
border:none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 0;
}
.navbar button {
outline: none !important;
}
This did the trick for me.
I am not quite sure how your button is being displayed when it has a class="navbar-toggle" but I think what you need is something like :
$('button.navbar-toggle').on('click', function () {
$(this).css('border', '1px solid blue');
});
If you wish to not use jQuery, you can do :
document.querySelector('button.navbar-toggle').addEventListener('click', function (e) {
e.target.style.border = '1px solid blue';
});
try css:
[your-btn] {out-line: none;}

How do I align text left and image right on the same line?

I using bootstrap to do a small project, I'm trying to do a dropdown and using a arrow to show that there is something under, but im having problem trying to align the text left and the arrow right.
it is possible to align the text left and the image right
this is how it looks now
Busines > |
|
|
Is there a way to make it look like this:
Busines > |
|
|
code:
<a href="#Business" class="expander">Business <span
class="glyphicon glyphicon-chevron-right pull-right"
style="float:right; margin-right:3px; font-size:0.7em; "></span></a>
Part of the menu code:
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Left Navigation</span>
</div>
<div class="navbar-collapse sidebar-navbar-collapse collapse">
<nav id="leftNav" role="navigation">
<ul class="leftnavigation">
<li>
Business <span class="glyphicon glyphicon-chevron-right pull-right"> </span>
<ul id="Business">
<li>Administrative </li> .........
What display property are your anchors set to? Try setting the a.expander to display: inline-block, and give it a width. That should float your chevron glyph to the right.
Also, no need to inline-style it with float: right, as that's what bootstrap pull-right does. (redundant CSS).
Hope that helps!
If you want align right arrow inside element than this element has to be width enough.
If element display style is inline (default for a tag) you cannot align anything inside.
E.g. if you will add display: block to your a tag or display: inline-block; width: 100%
Othervise your a will not take full width of parent element
<a href="#Business" class="expander" style="display: inline-block; width: 100%">Business
<span class="glyphicon glyphicon-chevron-right pull-right" style="float:right; margin-right:3px; font-size:0.7em; "></span>
</a>

Resources