My Navbar is not changing colour. Do I have the correct path to the Navbar.css file in the Navbar.jsx file?
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-toggleable-md">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="container">
<Link className="navbar-brand" to="/">Aquastars New Website</Link>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Navbar;
Below is the structure of the app
below is the code for the .css file
.navbar-brand {
color: rgb(197, 21, 21);
}
a {
color: #aaa;
font-weight: 200;
}
below is what is in my header.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>React App</title>
</head>
I'm still learning React but you may want to try import * as styles from './styles.css', and to use that specific class, className={styles.yourClass}
I managed to solve it by restarting the server. For some reason, the changes were not carried over from the CSS file. So I controlled C to stop the server and the restarted it again.
npm start
Related
So, my navbar is saved as a partial in a fairly straightforward express app. I have the navbar also included in a boilerplate wrapper which is being used on most pages, like so:
<h1>HELLO<h1>
and in the boilerplate file I have
<%- include("../partials/navbar")%>
The problem is that the navbar shows up but the two .svg images don't show on certain pages, which to my eye are using the exact same format. Does anyone have any ideas what the problem might be?
Also, please let me know if I can clarify anything - I'm quite fresh to coding so I'm a bit limited in my vocabulary.
Thanks in advance!
EDIT(nowhere near enough infomation, sorry):
here is the code for navbar partial:
<nav class="navbar navbar-expand-md sticky-top navbar-dark">
<img class="brand" src="logo.svg" alt="" />
<div class="container-fluid">
<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">
<div class="navbar-nav">
<a class="nav-link ms-3" href="/events">Upcoming Events</a>
<a class="nav-link ms-3" href="/events/new">New Event</a>
<a class="nav-link ms-3" href="/community">Community</a>
</div>
<div class="navbar-nav ml-auto rightLinks" id="navbarSupportedContent">
<% if(!currentUser) { %>
<p><%= currentUser %></p>
<a class="nav-link" href="/login">Login</a>
<a class="nav-link" href="/register">Register</a>
<% } else { %>
<a class="nav-link" href="/logout">Logout</a>
<p class="nav-link">
<%=currentUser.username %><img class="profileIcon" src="profile.svg"></img>
</p>
<% } %>
</div>
</div>
</div>
</nav>
and here is the boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style2.css" />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Anton&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Street Music</title>
</head>
<body class="flex-column">
<%- include("../partials/navbar")%>
<main class="containter vw-100"><%- body %></main>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<!-- <script src="/javascripts/validateForms.js"></script> -->
</body>
</html>
Maybe I should mention that the pages in which the images show up are in the same directory, and the images themselves are in public.
Each file begins with <% layout("layouts/boilerplate") %> but it only displays the images on certain pages.
first:-
img tag doesn`t have a closed tag so this is wrong
<img class="profileIcon" src="profile.svg"></img>
you should delete the closed tag to be like that
<img class="profileIcon" src="profile.svg">
second:-
you mentioned that the images is in anther directory and you didn`t route them in src
src="profile.svg"
to make the route correctly there is two ways :-
first :-
src="../public/profile.svg"
second:-
if you use express ,you can do static file to your public file in server.js like so
app.use(express.static('public'))
and then you can route directly to the public directory
src="./public/profile.svg"
I just have installed Angular 10 with Angular Materials ng add #angular/material
There I choose the custom theme: Purple/Green
Next step was to simply add a Toolbar, basically copy paste from googles site. But I cannot arrange the buttons matching the theme. I have no idea why it looks like this.
how it should look
<mat-toolbar color="primary">
<button mat-icon-button aria-label="Example icon-button with menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class="nav-spacer"></span>
<button mat-icon-button class="material-icons-outlined" aria-label="Example icon-button with heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
my stlye.css
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
and these imports
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
FormsModule,
MatToolbarModule,
MatIconModule,
],
What do I miss here please?
You need to add MatButtonModule in your imports.
My navbar is overlapping my content. All similar questions seems to have been solved by either (1) padding-top or (2) if padding-top is applied, make sure the custom.css is loaded after the bootstrap css. I have done both. I am using Django, and I know it is loading my custom.css because the background color is applied. I put my navbar in head when it didn't work the first time, it was in body before, but I was thinking the padding-top might be applied to that as well. Anyways, please help make it work! Here is my code:
base.html
<head>
{% load static %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'main/custom.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'main:index' %}">Navbar</a>
<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="{% url 'main:index' %}">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</body>
custom.css
body {
background-color: #242627;
padding-top: 100px;
}
a { color: inherit; }
Instead of padding top you should go about giving it margin-bottom instead. You are trying to keep the navbar and the top and rest of the content below it. So give the navbar a margin-bottom to keep the other content down. Also dont give it to the body! make a custom class like .custom and add it to the navbar.
By adding the padding-top to your body, you're adding it to the nav since that is in the body too. If you have a div below the nav in the chain of code, add the padding to that:
<div class="nav">
<!-- nav code -->
</div>
<div class="next-content"> <!-- APPLY PADDING-TOP TO THIS -->
<!-- code -->
</div>
I would like to have the collapsible button alligned to the right of the navbar (Bootstrap v4). I've tried to wrap the button in:
<div class='nav navbar-nav navbar-right'>
And also added the float-xs-right class... without success.
I have created the following plunker:
https://plnkr.co/edit/AeUbHyXL34G2VdQKpEpo?p=preview
float-xs-right was introduced in Bootstrap Alpha 5, but the plunker CSS is referencing Bootstrap Alpha 4. It works fine with Alpha 5:
http://www.codeply.com/go/Ina8YfuXaU
maybe add position absolute or fixed and move it to right
.navbar .navbar-toggler{
position: absolute;
right: 0;
}
you also want to move collapsible content out of nav
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
</nav>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
see updated plunker
simply fix with text-align:right
.navbar {
text-align:right;
}
try with this snippet
.navbar {
text-align:right;
}
#exCollapsingNavbar {
text-align:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
</body>
</html>
I made authentication example page with php artisan make:auth.
example page If i make changes in css stylesheet nothing is happening. Page is looking same all time. Css stylesheet is located in \public\css folder.
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
app.css is blank
app.scss
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
_variables.scss
// Body
$body-bg: #f5f8fa;
// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border: $laravel-border-color;
$navbar-default-border: $laravel-border-color;
$panel-default-border: $laravel-border-color;
$panel-inner-border: $laravel-border-color;
// Brands
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;
// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 14px;
$line-height-base: 1.6;
$text-color: #636b6f;
// Navbar
$navbar-default-bg: #fff;
// Buttons
$btn-default-color: $text-color;
// Inputs
$input-border: lighten($text-color, 40%);
$input-border-focus: lighten($brand-primary, 25%);
$input-color-placeholder: lighten($text-color, 30%);
// Panels
$panel-default-heading-bg: #fff;
From https://laravel.com/docs/5.8/frontend#writing-css:
You can compile your SASS files to plain CSS using Laravel Mix. The
npm run dev command will process the instructions in your
webpack.mix.js file.
So execute:
npm install
npm run dev
I'm not sure if you are talking about editing the app.css file or a new custom one.
If app.css gets overwritten by the pre-processor (normally shoudn't), you can always create a new css file in public/css/my-styles.css and load it in your view:
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<link rel="stylesheet" href="{{ URL::asset('/css/my-styles.css') }}">
Make sure to use greater specificity on your css rules to overwrite any predefined settings or use !important when you have too.
Also clearing your browser's cache (or using private mode, like Chrome's Incognito) will make sure that your are seeing your current css settings and not some cached content.