Attempting to show logo using 'content' from CSS - html

I have tried to show a logo on the header of my website but have been unsuccessful despite trying a number of times. I have tried to set the logo using HTML syntax as well as using the:
.div
{
content: url (...jpg);
}
Both have returned a small box in the header with a question mark in it. I have no idea why i am having issues with getting it to display the logo.
this is what it looks like at the moment:
and this is the code i have in css:
.logo::before {
content: url(new-bcu-logo.jpg);
}
html:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
<span class="sr-only">Toggle navigation</span>
</button>
<div class="logo navbar-brand">Student Dashboard</div>
</div>
Any ideas how I can get this logo to display. Much appreciated.

You need to make sure new-bcu-logo.jpg is in the same folder where you css files is, if you use inline style make sure that image is in the same folder as the html file.

Related

Bootstrap 4 hamburger vanishes even though navbar expands later

I'm working on my first website with bootstrap 4 and have some trouble with my collapsible navbar and the hamburger icon. I want to expand the navbar on medium screens, when smaller I want a hamburger icon to appear instead.
So far the Navbar is expanding nicely when the screen reaches the wanted size. Only the Hamburger icon becomes invisible (though cilckable!) to early, I think it already disappeares on sm. So I end up with a certain viewport with no menu visible. I habe absolutely no idea what the problem could be...
I tried severeal different browsers and also several different kinds of buttons / icons and none seem to work. In Opera none of the ones I tried showed at all.
```html
<!-- Navigation-->
<nav class="navbar navbar-expand-md bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="index.shtml"><img src="img/schriftzug.png" width="262px"></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
</div>
<!-- Links-->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav nav-tabs nav-justified">
```js
<script>
$(document).ready(function () {
$('.first-button').on('click', function () {
$('.animated-icon').toggleClass('open');
});
});</script>
etc.
Okay, I managed to solve the problem. There must have been some blunder in my custom css. I didn't find the specific mistake, but I started from scratch and copied the original code back into the custom and made the same changes again - it works finde now...

Bootstrap-based layout - navbar-brand to display img & text inline & aligned

I'm working on a site for my employer and have run into a little bit of an issue during our "rebranding" stage. The page in question can be found here: http://chargehubdevchris.azurewebsites.net/
The issue is specifically with the index page, and concerns the brand logo / text. The text is using a web font (that we generated) and the logo is an image placed inline within the Navbar-brand class anchor tag.
The img is forcing both elements to drop down about 10px from the desired height, and exceeding the nav's desired height.
The code in question is as follows:
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><img class="homelogo" src="logos/ChargeHub-Logo.png"/><span class="greylogo">Charge</span>Hub</a>
</div>
I've tried to use the "pull-left" class on the img, which then aligns the text properly with the rest of the nav, but leaves the img out of line. I've applied the pull to other elements, attempted adjusting Vertical-align, and even some negative margins. They didn't really accomplish what I wanted, without causing more of a headache down the line.
I have also tried placing them in a div, floating it, setting it to display inline-block, but I couldn't get it to play nicely.
I know I must be missing something probably rather obvious, but I've tried all that I can think of, and everything that I could find online to no avail, and was hoping somebody could help me sort this. It seems like there MUST be an easy way for bootstrap to accomplish this, as I cannot be the first to try!
I did solve this problem in this way.
.navbar-brand img {
position: absolute;
top: 0px;
}
thanks :)
In your <a class="navbar-brand page-scroll" href="#page-top"> element, change the padding-top property to make it placed upper.
.navbar-default .navbar-brand {
padding-top: 0;
}
I see when you scroll down, some JS code will add navbar-shrink class to the bar. Try to add padding-top modification under this class:
.navbar-brand :not(.navbar-shrink) {
padding-top: 0;
}

Create collapsible title bar in Bootstrap (no navigation)

I have created an application where the search function is the most important part. Therefore, I decided to put the search form in the title bar to have it available on every page. Works great, only on mobile devices I have the problem that the fluid layout causes the search fields to cover up most of the screen.
Thus, it would be great to collapse this title bar on mobile devices the same way a navigation bar does. Unfortunately, I did not get this working. I tried solving this with a navbar which did not work at all (see below).
Another idea of mine was to create two different search bars, a collapsed one and a hidden one and use Bootstrap's .hidden-* and .visible-* classes. Not sure how this would perform, apart from that I have not figured out yet how to create a non-navigation title bar in Bootstrap.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid col-md-12">
<div class='row'>
<div class='col-md-8'>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.php">Home</a>
</div>
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</div>
<div class='col-md-4' style='padding-top: 7px;'>
<!-- Session & status information go here -->
</div>
</div>
</div>
</nav>
Any idea how I can show my search fields on large screens and collapse them on mobile devices?
You did not give us much to work with, but as far as the collapsing goes I would go for a combination of css and jQuery. Here is the gist of how I would go about solving this problem by simply creating your own little "bootstrap-like" collapse.
html: Make your own little navigation structure with a button that will display your form on mobile devices.
<ul class="search-nav">
<li class="collapse-button">ICON</li>
<li class="search-form">
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</li>
</ul>
css: Make the collapse-button not show on large screen devices. On small screen devices the collapse-button can be displayed, but the form has to be hidden by default. All of this can be achieved using media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.collapse-button{
display: none;
}
.search-form{
display: block;
}
#media (max-width: 480px){
.collapse-button{
display: block;
}
.search-form{
display: none;
}
}
jQuery: If the user clicks on the collapse-button the form will toggle between being displayed and not. Something like this:
$( ".collapse-button" ).click(function() {
$( ".search-form" ).toggle(function() {
$( ".search-form" ).css("display","block");
}, function() {
$( ".search-form" ).css("display","none");
});
});
This is just the general idea. I would probably actually go with setting max-height of the form to 0 and overflow:hidden on devices with small screen and a bigger max height on devices with a larger screen. This way you could add a css transition that would make it expand more fluently.

Extending Navbar with Page Resizing Twitter Bootstrap

When I first installed twitter bootstrap and hadn't edited any Bootstrap code (the carousel) the navbar looked normal but it was a bit away from the edge.
And this is what it looked like when it was resized small:
Then when I changed the size of the navbar so it fit the entire page using CSS height and width it started glitching out:
When the browser wasn't resized it looked normal but if you made the browser smaller:
Also if the browser wasn't at the default size but it wasn't really small it would move away from the edge.
This is the code to make the collapsing function:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
This is the CSS code for my navbar:
.navbar{position:relative;top:65px;height:75px;width: 100%;margin-bottom:20px;border:1px solid transparent}
How can I keep the collapsing thing and also make sure the navbar is always going from the edge to edge of the web page without it glitching out and the words disappearing and stuff like that?
As you use bootstrap you'll only need to remove "container" class from the parents of "navbar" in your html, that'll make the navbar goes full width

Why is the navbar-brand link clickable only when the navbar is collapsed?

I'm using Bootstrap on a project and I have the following HTML (currently visible here):
<nav class='navbar navbar-default' role='navigation'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#header-navbar' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class="navbar-brand" href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a>
</div>
...
</nav>
If you try to click on the link with the text "Sharing Is Caring," nothing will happen. However, it is possible to select the link and navigate to the URL it points at if you use the tab key to highlight it and then press enter:
The link also works when the menu is collapsed, as below:
How can I make the link work all the time?
The Solution to your problem is very simple. The problem is because the "navbar-header" class has a property :float" with a value "left".
There are at least two ways to solve this problem that i know.
1).Add a "navbar-right" class to the next div immediately after the navbar-header. i.e
<nav class='navbar navbar-default' role='navigation'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#header-navbar' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class="navbar-brand" href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a>
</div>
<div class="collapse navbar-collapse navbar-right" collapse="!isCollapsed">
...
</div>
2). Add the float property with a value "right" to the next div yourself. be careful anyway because your collapsed menu floats to the right with the second solution.
Your code tells me you are trying to use Bootstrap 3 while your application on Heroku seems to be including Bootstrap 2.3.2. If you're able to update the css/js files that are being loaded on the site to BS 3 you should be good to go.
If the above solution doesn't work, I had a similar problem and was able to solve it by removing an added position: relative class from my navbar-header element.
Background: I was using bootstrap 3.2.0 and my navbar-brand link would only work when the navbar was collapsed. I had given the navbar menu position: absolute so I could align it along the edge and bottom of a .container with position:relative. However, I had also added the position: relative to my navbar-header element, which was unnecessary and broke my link.
I have found better solution for this. Just remove the class="navbar-brand" from the <a> tag and add <div> before it:
<div class="navbar-brand">Sharing Is Caring</div>
If it helps anyone, the solution to this for me was different. The <a class="navbar-brand"...>...</a> was placed outside the <nav class='navbar....>...</nav>. Moving it in (and at the top) helped resolve the issue.