Certain portions of the page looks different in firefox than chrome.
This is what it looks like in chrome:
This is what it looks like in firefox:
HTML code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
margin-top: 0;
padding-top: 0;
overflow-x: hidden;
}
#media print {
body {
margin-top: 0 !important;
}
}
body {
background-color: white;
color: black;
padding: 0;
margin: 0;
min-height: 100%;
min-width: 100%;
overflow-x: hidden;
}
.rowa {
padding: 10px;
background-color: black;
color: white;
height: 100%;
margin: 0;
}
#title {
font-size: 36px;
display: inline-block;
color: white;
}
<nav class="navbar navbar-inverse " id="navtop">
<div class="container-fluid rowa">
<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="#" id="title">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right menu " id="menu1">
<li> Home
</li>
<li> Booking
</li>
<li>Rates
</li>
<li> About us
</li>
<li> Contact us
</li>
</ul>
</div>
</div>
</nav>
I am not able to remove the extra space from top and the extra padding within the nav-bar.
I have set margin and padding to 0 for html and body in css, and min-width and min-height is 100%.
Also there is extra spacing between an image and form in firefox (for small screen devices).
How to I get rid of these extra spaces in firefox? Please help.
Adjust using height rule in CSS to id="menu1".
Related
I'm developing a website in Blazor with Bootstrap version 5.1. So I set an image within that navbar. Now I want to align the other items of the navbar just before and after the image in the center. I tried using the Bootstrap 5.0 ms-auto and me-auto to a div and put the nav items in it, but it only aligned the items to the right or left corner of the navbar.
Here is the code of the website:
#page "/"
<style>
.navbar {
position: relative;
padding-top: 0;
opacity: 80%
}
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}
.img-responsive {
height: auto;
width: auto;
max-height: 156px;
max-width: 250px;
top: 109px;
}
.circle
{
width: 249px;
height: 285px;
border-radius:250px;
font-size:50px;
line-height:500px;
text-align:center;
background:#000
}
body {
background: url(assets/hack2.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
<div class=bodyContainer>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="circle bg-light navbar-brand">
<a href="#" class="navbar-brand">
<img class="img-responsive navbar-brand" src="assets/logo.png" alt="logo">
</a>
</div>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
Home
Über uns
Aktuelles
Genossenschaft
Nochagfrogt
Kontakt
</div>
<div class="navbar-nav ms-auto">
Login
</div>
</div>
</div>
</nav>
</div>
If it helps (because I created a container class for the body):
.bodyContainer {
height: calc(100vh - 60px);
}
I made your .navbar-nav a font-color black just so I could see it better, and added white-space: nowrap; on your navbar-nav class so your words don't break when resizing. I am not sure if I properly understood what you wanted your end result to be, but I think I got the gist of it.
For this to work with the ease of customization in the future, I suggest splitting each side into two separate divs, as I did below. .left containing the left side nav components, and .right containing the right components. I put a flex-display on your two new divs dividing the components, and spaced them out using gap. Then I nested them in a parent nav element which I called same-line for demonstration purposes.
First, add a flex-display then you can add justify-content: space-around; on your parent nav that allows for the two sides to space evenly to both the left and right sides respectfully. If your logo is truly the size of the .circle class, I added a sample media-query so the font-size of the nav components gets smaller and doesn't overlap the logo.
.navbar {
position: relative;
padding-top: 0;
opacity: 80%;
}
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}
.img-responsive {
height: auto;
width: auto;
max-height: 156px;
max-width: 250px;
top: 109px;
}
.circle {
width: 249px;
height: 285px;
border-radius:250px;
font-size:50px;
line-height:500px;
text-align:center;
background: black;
}
.navbar-nav a {
color: black;
white-space: nowrap;
}
/* additions */
.left {
display: flex;
gap: 20px;
}
.right {
display: flex;
gap: 20px;
}
nav.same-line {
display: flex;
justify-content: space-between;
}
#media only screen and (max-width: 800px) {
.same-line {
font-size: smaller;
}
.left, .right {
display: flex;
gap: 5px;
}
}
/* additions END */
body {
background: url(assets/hack2.jpg) no-repeat center center fixed;
background-size: cover;
}
<div class="bodyContainer">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="circle bg-light navbar-brand">
<a href="#" class="navbar-brand">
<img class="img-responsive navbar-brand" src="assets/logo.png" alt="logo">
</a>
</div>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<nav class="same-line"> <!-- puts both .left & .right one same line -->
<div class="navbar-nav left">
Home
Über uns
Aktuelles
</div>
<!-- left contains leftside nav components, right = opposite -->
<div class="navbar-nav right">
Genossenschaft
Nochagfrogt
Kontakt
</div>
</nav>
<div class="navbar-nav ms-auto">
Login
</div>
</div>
</div>
</nav>
</div>
Click full-page when testing the snippet, and resize your browser to watch the font-size change just before it overlaps. I would target this same media-query to change your logo size when resizing also.
I have a container where i store 2 div's. ".logo" and ".navbar-list" how can I move my ".navbar-list" to the right edge of container.
Previously everything worked but when I switched bootstrap to version 4.3.1 my div's overlapped .I've tried float:right but is not working.
container {
font-family: sans-serif;
height: 100%;
margin-left: auto;
margin-right: auto;
float: none;
padding: 0;
}
.logo {
width: 380px;
margin-right: 0;
position: absolute;
height: 100%;
margin-left: 10px;
}
.navbar-list {
color: white;
width: 300px;
height: 100%;
}
<div class="container">
<div class="logo">
<a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
<h1>WITAJ W <span>DOMU!</span></h1>
</div>
<div class="navbar-list ">
<ul>
<li>
<span class=" glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
</li>
</ul>
<ul>
<li> <button type="button" class="btn btn-danger btn-md ">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
</button></li>
</ul>
</div>
</div>
There are lots of methods of achieving your desired result! In my opinion, Flexbox would be your best option. You should add display: flex to your .container. You can add the flex to the .logo container as well, if you want the logo and h1 to sit side by side.
You should also avoid using float, as this often makes HTML behave unexpectedly. You can replace this with justify-content: space-between.
I've amended your example above to incorporate my amends:
.container {
font-family: sans-serif;
padding: 0;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 380px;
/*margin-right: 0; */
/*position: absolute; */
height: 100%;
margin-left: 10px;
display: flex;
align-items: center;
}
.navbar-list {
color: white;
width: 300px;
height: 100%;
}
<div class="container">
<div class="logo">
<a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
<h1>WITAJ W <span>DOMU!</span></h1>
</div>
<div class="navbar-list ">
<ul>
<li>
<span class=" glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
</li>
</ul>
<ul>
<li> <button type="button" class="btn btn-danger btn-md ">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
</button></li>
</ul>
</div>
</div>
From a high level, the go-to method for this situation is using flexbox instead of floats. Not sure about Bootstrap in your case or why you had that change happen.
.container {
display: flex;
justify-content: flex-end; /* and many more positioning options */
}
just add float: right; to your .navbar-list css then you can move your div to right side
.navbar-list {
color: white;
width: 300px;
height: 100%;
float: right;
}
Can you please check out this fiddle:
https://jsfiddle.net/3047p0wy/
Here is the HTML:
<nav class="navbar navbar-default">
<div class="container-fluid" id="navigation-bar">
<div class="navbar-header">
<div class="headerspace">
<a href="http://google.com">
<span>The title</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-element">
<ul class="nav navbar-nav navbar-right" id="tabs">
<li>
<div class="tab">
<a href="http://google.com">
<div class="greysquare">
<div class='greysquare-content'>
<div>
<span>EX</span></div>
</div>
</div>
<div class="notgreysquare"><span>PLORE</span></div>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
And the css is as follows:
.navbar {
height: 100%;
margin-top: 10px;
background-color: inherit;
border: none;
}
.navbar-header {
height: 100%;
width: 30%;
}
#navigation-bar {
height: 100%;
}
#navbar-collapse-element {
height: 100%!important;
}
#tabs {
max-height: 100%;
}
.tabspace {
max-height: 100%;
width: 70%;
}
.tab {
margin-left: 5%;
margin-top: 1%;
max-height: 100%;
}
.greysquare,
.notgreysquare {
display: inline;
}
.greysquare {
display: block;
width: 70px;
background-color: #CCCCCB;
height: 100%;
max-height: 100%;
}
.greysquare:before {
content: "";
display: block;
padding-top: 100%;
}
.greysquare-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.greysquare-content div {
display: table;
width: 100%;
height: 100%;
}
.greysquare-content span {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
.notgreysquare {
height: 100%;
}
Basically I have this navbar, and inside it I am trying to work with each navigation tab. The idea is to have the first two letters of a link inside a grey square so that the letter were in the bottom right corner of the square and then the rest of the word was outside of the grey square but on the same line with the first two letters. See the image above to understand what I am looking for (can ignore the colours).
I started with following another fiddle that I found here: https://jsfiddle.net/josedvq/38Tnx/
So, as you can see, of the word EXPLORE, the EX is, indeed, placed in the right span, but the greysquare-content, for some reason, at least visually includes the PLORE part of the title which is not even its child, and I cannot figure out why it happens.
I would appreciate any help, really.
Is this what you're looking for:
https://jsfiddle.net/3047p0wy/3/
The HTML
<nav class="navbar navbar-default">
<div class="container-fluid" id="navigation-bar">
<div class="navbar-header">
<div class="headerspace">
<a href="http://google.com">
<span>The title</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-element">
<ul class="nav navbar-nav navbar-right" id="tabs">
<li>
<div class="tab">
<a href="http://google.com">
<div style="display: block;">
<span class="greysquare-content pull-left">EX</span>
<span class="notgreysquare pull-left">PLORE</span>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
and the CSS
.navbar {
height: 100%;
margin-top: 10px;
background-color: inherit;
border: none;
}
.navbar-header {
height: 100%;
width: 30%;
}
#navigation-bar {
height: 100%;
}
#navbar-collapse-element {
height: 100%!important;
}
#tabs {
max-height: 100%;
}
.tabspace {
max-height: 100%;
width: 70%;
}
.greysquare-content {
background-color: #CCCCCB;
padding: 5px;
}
.notgreysquare {
padding: 5px 5px 5px 0px;
}
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
.footer {
width: 100%;
margin-top: 30px;
margin-bottom: 0px;
z-index: 12;
background-color: rgb(134, 147, 158);
}
As you can see my footer does not stick to the bottom. I have the same exact code for other pages and it worked but for this page it does not. Can someone tell me what is wrong? I want it to be at the end of the page.
You can achieve that with positioning. Make the footer position: fixed; and give it bottom: 0; so it will stick to the bottom of the viewport:
.footer {
width: 100%;
height: 200px;
margin-top: 30px;
margin-bottom: 0px;
z-index: 12;
background-color: rgb(134, 147, 158);
position: fixed;
bottom: 0;
}
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
Edit
If you want your footer to be on the bottom of your page rather than on the bottom of the viewport, just remove the position: fixed; give the element above the footer a min-width of 100% minus the height of the footer, e.g.:
min-height: calc(100% - 200px);
When you are first having a <html> that may not fill the window's height, and neither the <body> element, also the .container element... if you want to have a sticky footer, you could try
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
}
body {
padding-bottom: 100px;
}
Edit 1 -
There are 2 ways to not use the fixed position, the first one is using the calc function of CSS:
html, body { min-height: 100vh; }
nav { min-height: 10vh; height: auto; }
footer { min-height: 100px; height: 100px; }
main { min-height: calc(90vh - 100px); }
The other way ia using <table>, <tr> and <td> or display: table, display: table-row and display: table-cell with min-height CSS property.
You may want to look at my answer of this question for more info: Sticky footer that extends when at website-bottom and scrolling further
Edit 2 -
I found that this could be done via the display: flex; easily.
body {
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
min-height: 100vh;
}
header { height: 100px; }
content { flex-grow: 1; }
footer { height: 100px; }
Try on: https://jsfiddle.net/89ucrec5/6/
I found a decent solution to this a few months ago... You have to wrap your page content and footer into separate wrappers and do a little bit of CSS magic with :after to get it right.
html:
<html>
<body>
<div class="content-wrapper">
my content
</div>
<div class="footer-wrapper">
my footer
</div>
</body>
</html>
css:
html, body {
height: 100%;
}
.content-wrapper {
min-height: 100%;
margin-botton: -100px; //set to anything as long as it matches footer-wrapper height
}
.content-wrapper:after {
content: "";
display: block;
}
.footer-wrapper, .content-wrapper:after {
height: 100px;
}
html:
<div class="your-container">
<div class="content">
</div>
<div class="footer">
</div>
</div>
css:
.your-container {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
}
You will need to make proper padding from main content
Another way is setting flex container so your content would take all remaining space
html:
<div class="your-container">
<div class="content">
</div>
<div class="footer">
</div>
</div>
css:
.your-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
content {
flex-grow: 1;
}
How do you add an arrow using css to the navbar brand (see image example)
The arrow should not be visible when in mobile view.
The following doesn't work - clearly I'm not the best at css.
.navbar-default {
.navbar-brand {
position: relative;
float: left;
margin-right:30px;
color: #navbar-default-brand-color;
&:hover,
&:focus {
color: #navbar-default-brand-hover-color;
background-color: #navbar-default-brand-hover-bg;
}
&:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 12px solid #brand-secondary;
position: absolute;
top: 50%;
margin-top: -19px;
left: 100%;
z-index: 3;
}
&:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 12px solid white;
position: absolute;
top: 50%;
margin-top: -19px;
margin-left: 1px;
left: 100%;
z-index: 3;
}
#media (max-width: #grid-float-breakpoint) {
}
}
}
the html is as follows
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#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="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Getting started
</li>
<li>
CSS
</li>
<li>
Components
</li>
<li>
Javascript
</li>
<li>
Customize
</li>
</div>
</div>
</nav>
Update: I've managed to get it working using the before and after css. How do I overide this css with the media query i.e whats the css that goes inside the media query to remove it on a mobile device?
have created a small fiddle with example code of how to do this for list items. It can be edited slightly and re-applied to your code to achieve the desired affect.
It's all about the :before and :after selectors.
http://jsfiddle.net/dgc6ajbL/