In Bootstrap 3, the navbar-default class provided a linear-gradient background and a couple other nice touches. It seems to have been removed from Bootstrap 4 beta 2. Before re-creating the desired effect by hand I thought I might check here -- am I missing something?
Read the Bootstrap 4 docs.
http://getbootstrap.com/docs/4.0/components/navbar/#color-schemes
There is navbar-dark bg-primary, navbar-light bg-light, etc..
More info:
Bootstrap 4 navbar color
Bootstrap 4 custom navbar
Related
I have added my own classes along bootstrap using backtick butt its not working.
e.g
<nav className=`navbar navbar-expand-lg navbar-light bg-light ${classes.navStyle}`></nav>
Here' the extra class(classes.navStyle) is not applied.
Kindly tells possible solution for (component-level-css) when using bootstrap in Reacjs Projects
Possible solution for component-level-css when using bootstrap in project
I am trying to style my custom joomla component but found out using standard bootstrap syntax is not working.
I tried the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
</div>
</div>
</div>
But the columns are stacked under eachother. I tried adding the bootstrap CDN in my component page, but the Joomla menu falls apart when doing that.
What can I do to make bootstrap work?
The default Joomla 3.x templates and many third party Joomla templates use Bootstrap 2 so Bootstrap 3 or 4 column classes won't necessarily work.
You have a few options:
Use column classes from the version of Bootstrap that is being loaded on your Joomla website
Replace the version of Bootstrap that is being loaded with Bootstrap 4 using a third party extension e.g. Toggle Bootstrap (free) or jQuery Easy (free) or similar
Manually code a solution to replace the version of Bootstrap that is being loaded with Bootstrap 4 (for some example code for this, see the answers to https://joomla.stackexchange.com/q/4953/120)
Change to a Bootstrap 4 template such as JoomShaper Helix Ultimate (free)
I recommend the last option at this will put you in good shape for the upgrade to Joomla 4 within the next 12 months or so. Joomla 4 will use Bootstrap 4.
col-md-x will only activate on medium screen sizes (768px) or higher since bootstrap is a mobile first approach. Try changing col-md-4 and col-md-8 to col-4 and col-8
How to add a specific class to a nav bar based on its component using angular 5
Basically, I'm trying to create an Angular 5 App. Now in this app, I've multiple components like HomeComponent, AboutComponent, ContactComponent. Now I want my nav bar's background completely transparent in the Home Component but black in other components.
I'm using bootstrap 4 also in this project. So in other components, I just want to add bg-primary class to my navbar and in the home component, I just want to remove that class and some CSS styles.
how can I achieve it?
Here is the code for my nav bar
<nav class="navbar navbar-expand-lg navbar-dark text-uppercase bg-primary w-100 position-fixed">
........
.......
</nav>
There might be a simple way of doing that. If you have a routerLink in your navbar that links to your home component you can use the routerLinkActive directive to find out if the route is active at the moment.
<a [routerLink]="['/home']" routerLinkActive #homeActive="routerLinkActive">
With the second part #homeActive="routerLinkActive" you define a template variable that will be either true or false, depending on if we are on the home route.
Then in your navbar you can use that variable to control the class.
<nav class="..." [class.bg-primary]="!homeActive">
The bg-primary class will be applied when the home route is not active.
If I'm not mistaken you have to make sure that your home route is something different than /, otherwise routerLinkActive will be true for every route.
See in the docs for more details about the directive.
I've searched for answers on Zurb's site as well as other posts here on SO but haven't found anything that appears to address this issue.
I'm working with Foundation 6 (tried both sites and Zurb templates). Many of the utility classes are working such as top-bar, rows, large, small, medium-column, classes, etc. The default template works as well and shows the different callout elements, buttons, etc.
Some utility classes that were available in Foundation 5 aren't working in 6 such as text-left, text-right, float classes such as right and left or color classes such as white, black, etc. I'm sure there are others but these are the classes I've run across thus far.
I've checked app.scss to ensure nothing is commented out. I also checked the gulpfile.js and it's including all the assets, the SASS for foundation-sites and no javascript files are commented out.
For example, this code from the Zurb site, under v5.5.3 does not activate the panel class or the right or left floats in Foundation 6.
<div class="panel clearfix">
<a class="button right">Float Right</a>
<a class="button left">Float Left</a>
</div>
In my default.html layout, I have the following stylesheets:
<link rel="stylesheet" href="{{root}}assets/css/foundation.min.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css">
and the following javascript files:
<script src="{{root}}assets/js/jquery.min.js"></script>
<script src="{{root}}assets/js/what-input.min.js"></script>
<script src="{{root}}assets/js/foundation.min.js"></script>
<script src="{{root}}assets/js/app.js"></script>
Am I missing a file reference, is there something else I can check to get these classes to work or are these utility classes no longer available in Foundation 6?
The answer apparently is some class names changed and others were possibly removed. Until there is updated F6 documentation outlining the classes, it'll require searching the css for classes that serve the purpose or adding custom classes.
EDIT: For further clarification, I found that the colors listed on this page - http://foundation.zurb.com/sites/docs/global.html, are referring to the colors used but the classes don't work.
For example, adding "alert" as a class to elements should color them red that's listed on the above-referenced page.
Their example, which adds "secondary" to the button element.
To color a component, add the name of the color as a class.
<button class="button">Primary Action</button>
<button class="secondary button">Secondary Action</button>
It doesn't change the color as ".secondary" is not a css class in Foundation 6. What I found by looking at the _settings.scss file is those are actually SASS global variables that are applied to different classes throughout. This is the same for .success and others. ".alert" is a class but only styled when applied in conjunction with other colors.
Looks like it's best to check the _settings.scss file if you're not finding the classes you're looking for or if something isn't working.
Multiple navbars on the same page dropdowns will overlapped by other navbars, see:
How to prevent this?
Although navbars are meant for singular use you are free to use more as one navbar per page. Multiple navbars on the same page will have the same z-index (1000) so dropdowns may overlap. When using more navbars give each an different z-index (and id). The second z-index should to be lower than the first one, etc.
B.e. with having navbars like:
<nav id="navbar1" class="navbar" role="navigation">
<nav id="navbar2" class="navbar" role="navigation">
<nav id="navbar3" class="navbar" role="navigation">
<nav id="navbar4" class="navbar" role="navigation">
set the z-indexes by:
#navbar2 {z-index:999;}
#navbar3 {z-index:998;}
#navbar4 {z-index:997;}