I am having trouble accessing the text inside my navbar-brand in a bootstrap 4 page I am working on.
Here is part of my html code for a navbar:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Logo -->
<a class="navbar-brand">Houston Chamber Music Network</a>
<ul class="navbar-nav">
<li class="navbar-item">
<a class="nav-link active" href="#">DASHBOARD</a>
</li>
I have left off much of this code because right now I'm focused on the navbar-brand.
I have a linked css document but I have been unable to access the text within the navbar-brand in order to change color and other attributes.
Thank you.
u have to put tag(p or h1, etc...) and give class to your navbar-brand text.
<a class="navbar-brand">
<h5 class="bg-info">Houston Chamber Music Network</h5>
</a>
Related
I am simply trying to place an image directly UNDER the navbar. I DO NOT want the nav bar text to overlap the image in any way.
No matter what I do in my code the image stays locked to the end of the navbar. It will not go into its own separate row BELOW the nav bar.
I have tried putting it in its own div, section, p, ul, li, and nothing works.
Is there a way to adjust the image in another contianer, without using the break tags.
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md fixed-top">
TEXT
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<br>
<br>
<br>
<br>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img class="img-thumbnail rounded-circle" src="/Users/admin/Pictures/img.jpg" alt="img">
</div>
fixed-top makes nav to be position: fixed, So the vertical height can't be filled. If any further tags are added, those tags will stack to the nav.
To overcome this situation use padding-top of approximate calculation of nav height say 50px. So applying this value to the further tag in your case <body style='padding-top:50px'>
Or else we can use sticky-top, but it is not compatible for all browser yet
I think you must use position sticky instead of position fixed for your navbar
I am new to coding and I appreciate this will be a very basic question. I am putting a very basic navbar together using Bootstrap 4. As per the documentation, I have been putting the logo image within an <a> tag and giving this tag the class of navbar-brand. My understanding is that when there is a logo item, it aligns left and the menu items i.e. links, align right by default.
In my case, I am using only a logo image and it all aligns correctly until I resize the screen to a smaller size and it changes to the navbar-toggler (which is what I want). When I do this though, the menu icon appears on the left, underneath the logo. I would like the toggler to appear on the right, as it appears in the bootstrap documentation. I have checked and there doesn't appear to be any padding or similar pushing it underneath it.
This is the code I have been using (the menu items are just placeholder for now while I get the functionality working)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img class="logo-img" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mr-auto"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a
>
</li>
</ul>
</div>
</nav>
I read a few other entries on here and someone had got around this by removing the <a> tag and applying the navbar-brand class to the image itself. When I do this, it works and the navbar-toggler aligns right as it should, only now the menu items when in large screen mode align-left alongside the logo.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img class="logo-img navbar-brand" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
It was always my understanding that the navbar-brand class and logo image should be held within an <a> tag? When there is no image and it's the only text for the navbar logo, all the alignment works fine, it's only when there is an image.
Sorry for what is a very basic question - I'm learning to code at the moment so I am keen that I am getting the fundamentals right rather than hacking around things. Thanks in advance.
Two issues:
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
In CSS classes nothing else just background color only so nothing in css file anything.
Any help or suggestions
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg core-header navbar-light">
<div class="container">
<a href="#" class="navbar-brand"> <img class="image_size" src="/images/logo1.png" alt="Logo">
</a>
<button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
<div class="navbar-nav">
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"><i class="fab fa-youtube text-white"></i></a>
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"></a>
</div>
</div>
<div class="reserve">
<a target="_blank" class="button bg-white reserve-table" href="#">Reserve a Table</a>
</div>
</div>
</nav>
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so.
Solution
add class ml-auto to <div class="navbar-nav"> which will move social icons to right side.
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
Solution
The reason that is happening because 'container' is flex container and when navbar-collapse div is shown (which has 100% width) expands and takes space which falls the reserve button. So you need to remove 'remove button' div within <nav> and keep it next to <nav> tag and style accordingly.
Hope this helps.
1. The Problem
I'm trying to mimic Bootstrap's Webpage's Navbar but I'm having no success, despite having the same classes all around. I'm also using Angular and that got me wondering if that was related to something in the TypeScript framework and not with Bootstrap itself — that is the case for the dropdown button for example.
The main issue is that the uls with the menu items and social icons are not forming different rows when the screen width is reduced.
For example, this is what I expected with my website:
And this is what I got instead:
2. The Code
I'm not using anything fancy in Angular at this point, just plain objects' properties (I've tried it with a header instead of a nav also):
<nav class="navbar navbar-expand navbar-light bg-light">
<a
class="navbar-brand mr-0 mr-md-2"
routerLink="/">
Logo
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li
class="nav-item"
*ngFor="let itemNavbar of itemsNavbar">
<a
[routerLink]="itemNavbar['page']"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive="active"
class="nav-link">
{{ itemNavbar[langNavbar] }}
</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-auto">
<li
class="nav-item"
*ngFor="let socialIcon of socialIcons">
<a
class="nav-link"
href="{{ socialIcon.link }}">
<i [ngClass]="socialIcon.icon"></i>
</a>
</li>
</ul>
</nav>
Boy, do I feel stupid for this...
After a lot of time tinkering with the subelements, the mistake was at the top all along. I had accidentally copy-pasted the <nav> element at the top from another page, and, thus, it lacked the flex-column and flex-md-row classes:
<nav class="navbar navbar-expand navbar-light flex-column flex-md-row bg-light">
Anyway, thank you very much for those who tried to help.
EDIT 9-10-19: I gave the img tag a class of "logo" and moved the inline styles to the seperate style sheet, the Navbar links don't collapse to a toggle icon still.
I've been styling a bootstrap navbar with some success, but for some reason when I reduce the page size the navbar links don't collapse into a Toggle Icon, they just disappear.
I want the navbar links to disapear if the page gets too small but be replaced with a button that can be toggled to reveal the navbar links.
I've done a lot of looking and most of the problem solutions I've found involve making sure the div ids match, I'm pretty sure mine do, please help!
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/darkiddlogostandalone.png" height="57px" width="200px"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Illustration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Animation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
I just want the links to condense into the toggle button on the right.
SO to answer my own question (sort of)
I went back to an earlier version of this bootstrap template I made when the hamburger toggler was working, and meticulously added the logo and styled the navbar over again because I found that reverting back to old stylesheets seemed to allow the hamburger to show up.
I found that styling using the bootstrap classes can be hit or miss, so I gave my logo img tag a class of "logo" and then went into the style sheet and
`position: absolute;
left: 0px;
top: 0px;
z-index: -1;`
I don't know if that's overkill to keep the logo on the top left of the fluid container that is the navbar, I was watching this tutorial https://www.youtube.com/watch?v=rgukBRi1CSU&t=594s
And although it was hard to understand the gentleman, he mentions getting rid of bg-light and navbar-light in order to make his navbar forrest green, I just wanted grey so I removed bg-light and added a class called "navback" and used that to style the background color...<nav class="navbar navbar-expand-md navbar-light sticky-top navback">
`.navback {
background-color: #A8A8A8;
}`
My logo was huge, and I was having a hard time getting it to reliably resize, so I made it 190x54px and that seemed to remove the need for styling it's size, and I think the logo itself was causing the problem, for whatever reason my styling of the navbar and the logo was getting in the way of the collapsing of the navbar links into the hamburger toggle button, but the above changes seemed to remedy the situation.