<body>
<div class="sts-viewport-fill">
<nav role="navigation" class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Knonet</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
<li><a href=#>Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<h1 class="text-center">CONNECT WITH EVERYONE.<br>
<small>Knonet aims to connect the whole world with the Internet.</small>
</h1>
</div>
</div>
<div class="container sts-second-slide">
Salut, et Bonjour!
</div>
</body>
That there's my HTML. I've applied a bunch of CSS rules like so:
body {
font-family: 'Source Sans Pro', 'Segoe UI Light', sans-serif;
font-weight: initial;
font-weight: 100;
}
.sts-viewport-fill {
position: absolute;
top:0;right:0;bottom:0;left:0;
background-color: #000000;
color: #ffffff;
}
.sts-viewport-fill .container-fluid h1 {
margin: 250px auto 100px auto;
font-weight: 900;
}
.navbar-collapse, nav [type="button"] {
border: none !important;
border-radius: 0%;
}
.sts-second-slide {
margin-top: 100px;
}
As far as I'm concerned, this makes the div.sts-viewport-fill fit the entire viewport of the screen, or at least what's left of it.
The problem? See all that French there? Salut, et Bonjour!?
It does not appear in the browser. Observe:
Can somebody tell me what's going one here? I have a really strong feeling this has something to do with the position: absolute; and top:0;bottom:0; rules.
Merci d'Avance!
PS: Even if I apply a color: #fff; attribute to the .sts-second-slide selector, I still don't get a result.
You have to add position to that element.
Try
.sts-second-slide {
margin-top: 100px;
position: relative;
}
Related
I have a bootstrap 4 website (https://sedomadrid2021.com) which has a navbar, the navbar has an odd issue on apple mobile devices: On the home page the navbar does not seem able to push all the content down and some of the menu gets overlapped by the content placed below, on the "ponentes" page, the content just doesn't get pushed down.
This is my home html:
<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="https://sedomadrid2021.com">
<img src="/img/logo.png" alt="logo" height="110px">
</a>
<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">
<ul class="navbar-nav mx-auto">
<li class="nav-item active mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Infórmate</a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscríbete</a>
</li>
</ul>
</div>
</nav>
<div class="contenedor-principal">
<div class="contenedor-texto-principal">
<span class="texto-titulo-principal">
¿Te lo vas<br>a perder?<br>
</span>
<span class="texto-parrafo-principal">
<br>El 67º congreso de la sedo 2021 en Madrid congregará a los mejores profesionales de la ortodoncia de España en un evento de reencuentro cooperación y conocimiento
</span>
</div>
<div class="contenedor-bocadillo">
<img class="fondo-bocadillo" src="/img/bocadillo.png" alt="fondo-texto">
<span class="texto-bocadillo">Que no te<br>lo cuenten</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
this is my "ponentes" page html:
<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="https://sedomadrid2021.com">
<img src="/img/logo.png" alt="logo" height="110px">
</a>
<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">
<ul class="navbar-nav mx-auto">
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Infórmate</a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscríbete</a>
</li>
</ul>
</div>
</nav>
<div class="contenedor-ponentes">
<div class="titulo-precongreso">
<h2>Precongreso</h2>
</div>
<div class="row">
<div class="col-sm-6">
<img class="imgponente" src="/img/ponentes/pre-ewaczochrowska.jpg" alt="Ewa Czochrowska">
<h4>Ewa Czochrowska</h4>
</div>
<div class="col-sm-6">
<img class="imgponente" src="/img/ponentes/pre-rafiromano.jpeg" alt="Rafi Romano">
<h4>Rafi Romano</h4>
</div>
</div>
<div class="titulo-congreso">
<h2>Congreso</h2>
</div>
<div class="row fila1congreso">
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/wassimbouzid.jpeg" alt="Wassim Bouzid">
<h4>Wassim Bouzid</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/luiscarriere.jpeg" alt="Luis Carriere">
<h4>Luis Carriere</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/tommasocastroflorio.jpeg" alt="Tomasso Castroflorio">
<h4>Tomasso Castroflorio</h4>
</div>
</div>
<div class="row fila2congreso">
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/alvaroferrando.jpeg" alt="Alvaro Ferrando">
<h4>Álvaro Ferrando</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/raulferrando.jpeg" alt="Raul Ferrando">
<h4>Raúl Ferrando</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/alejandroramirez.jpeg" alt="Alejandro Ramirez">
<h4>Alejandro Ramírez</h4>
</div>
</div>
<div class="row fila2congreso">
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/pabloramirez.jpeg" alt="Pablo Ramirez">
<h4>Pablo Ramirez</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/jeanlouisraymond.jpeg" alt="Jean Louis Raymond">
<h4>Jean Louis Raymond</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/arturovela.jpeg" alt="Arturo Vela">
<h4>Arturo Vela</h4>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
And this is my CSS
#font-face {
font-family: "Rotunda-Regular";
src: url(fonts/RotundaRegular.otf) format("opentype");
}
#font-face {
font-family: Rotunda-ExtraBoldItalic;
src: url(fonts/RotundaExtraBoldItalic.otf) format("opentype");
}
#font-face {
font-family: Rotunda-Light;
src: url(fonts/RotundaLight.otf) format("opentype");
}
body{
background-color: #fff;
}
.outer{
display: flex;
flex-flow: column;
height: 100%;
}
.navegacion{
margin-right: 8%;
margin-left: 8%;
margin-top: 4%;
background-color: #fff !important;
}
.navegacion li{
font-family: "Rotunda-Regular";
text-transform: uppercase;
color: #141b4d;
font-size: 1.35em;
}
.contenedor-principal{
flex-grow : 1;
background-image: url(/img/fondo-lg.png);
background-size: cover;
background-repeat: no-repeat;
}
.contenedor-texto-principal{
position: absolute;
left: 8%;
width: 20%;
top: 30%;
}
.texto-titulo-principal{
font-family: "Rotunda-ExtraBoldItalic";
font-size: 3em;
line-height: 1.25em;
color: #f2827f;
}
.texto-parrafo-principal{
font-family: "Rotunda-Light";
font-size: 1.25em;
color: #666666;
}
.fondo-bocadillo{
position: absolute;
z-index: 10001;
height: 250px;
}
.contenedor-bocadillo{
width: 20%;
position: absolute;
z-index: 10000;
left: 70%;
top: 65%;
}
.texto-bocadillo{
padding-left: 4%;
padding-top: 20%;
position: absolute;
color: #ffc845;
font-family: "Rotunda-ExtraBoldItalic";
font-size: 3em;
text-align: center;
z-index: 10002;
}
.btninscrib{
font-family: "Rotunda-ExtraBoldItalic";
color: #f2827f !important;
background-color: #7248bd;
border-radius: 15px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px !important;;
padding-right: 30px !important;
}
.btnreg{
padding-top: 20px !important;
}
.contenedor-ponentes{
margin-right: 7%;
margin-left: 7%;
margin-bottom: 5%;
text-align: center;
}
.imgponente{
width: 55%;
}
.titulo-precongreso{
color: #f2827f;
font-family: "Rotunda-ExtraBoldItalic";
padding-top: 2%;
padding-bottom: 3%;
}
.titulo-precongreso h2{
font-size: 3em !important;
}
.titulo-congreso{
color: #34a798;
font-family: "Rotunda-ExtraBoldItalic";
padding-top: 6%;
padding-bottom: 2%;
}
.titulo-congreso h2{
font-size: 3em !important;
}
.imgponente-cong{
width: 60%;
}
.fila2congreso{
padding-top: 5%;
}
.contenedor-ponentes h4{
font-family: "Rotunda-Regular";
padding-top: 5%;
}
#media (min-width: 320px) and (max-width: 768px) {
.contenedor-ponentes{
position: relative;
}
.contenedor-principal{
background-image: url(/img/fondo-sm.png);
background-size: cover;
}
.contenedor-texto-principal{
position:relative;
width: 80%;
left: 8%;
top: 20%;
}
.contenedor-bocadillo{
width: 80%;
left: 3%;
top: 120%;
}
.fondo-bocadillo{
height: 250px;
}
}
As I've mentioned, this issue is only happening on mobile apple devices. On android phones, windows desktops and apple desktops, everything is looking fine. This is a very simple webpage, you are able to navigate and visit the site directly if you want to replicate the issue.
Quick reply before looking into it more: this issue is also happening on Windows 10 using latest Firefox by just resizing the browser window. So it is not a Apple mobile issue only.
Possible fix:
So what I can see is that you are using position: absolute quite a lot on the main page. This seems to be breaking the dropdown menu (for good reasons).
Maybe change those to something else, because the absolute is what it says: absolute. Meaning it will stay where it is, no matter what happens around it.
solution: The issue was because I was placing the navbar inside the "outer" div which is a flex div.
Just currently working on my site and using bootstrap to help me as i was told it was a great framework to use. Anyway i am currently having a problem putting text in the header and positioning it in the right place.
My html code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<div class = "Text">
<a class="navbar-brand" href="#">
<h1>Text1</h1>
<h2>Text2</h2>
<h3>Joruney</h3>
<p>Starting to work around here</p>
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class = "nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Text<b class="caret"></b>
<ul class="dropdown-menu">
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS:
.navbar-default {
background-color: #760003;
padding: 30px;
}
.Text h1 {
font-family: "Times New Roman", Georgia, Serif;
font-size: 59px;
margin-top: -30px;
float: left;
padding-left: 10px;
}
.Text h2 {
font-family: "Times New Roman", Georgia, Serif;
font-size: 65px;
margin-top: 7px;
margin-bottom: -25px;
margin-top: -22px;
padding-right: 6px;
float: left;
}
.Text h3 {
font-family: "Times New Roman", Georgia, Serif;
font-size: 44px;
margin-top: -17px;
padding-top: 0px;
float: left;
}
.Text p{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-top: 35px;
float: left;
}
So i am trying to ahive by getting it to look like:
Text1 Text2 Text 3
Starting to work around here
However what its actually looking like is:
Text1 Text2 Text3
Starting to work around here
I cant get the p tag to move under it. Now i tried to use position: absolute; however when i resize the page its not mobile friendly at all. It looks awful but i can get it in the right place.
Could anyone help me with this problem so that i can get the text to go under the three text headers and when it resizes it will all stay in that same block and never move but just get smaller?
Thanks for all the help
To give an example of what i was trying to get
Example
U an see Text 1 Text 2 and Text3 are there
and then the p tag is below.
Okay I have created what you have asked for, you should look at the CSS properties text-align and display
I have created a ul with three li
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<div class = "Text">
<a class="navbar-brand" href="#">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<h6>This is below</h6>
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class = "nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Text<b class="caret"></b>
<ul class="dropdown-menu">
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS:
.navbar-default {
background-color: #760003;
padding: 20px;
}
.Text ul {
font-size: 20px;
margin-top: -30px;
margin-left: 0;
margin-bottom: 0;
list-style: none;
padding: 0;
text-align: center;
}
.Text ul li {
display: inline-block;
}
.Text h6 {
margin-top: 0;
font-size: 26px;
text-align: center;
}
This was done very fast to give you an idea of how to do it, you should look at the Bootstrap Documentation and learn about the CSS positioning
https://getbootstrap.com/components
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
I have one navbar in one website that im building which is full width in large screen.
I am trying to make it in my own width for large screens and im stuck.
i have the code here
.navbar {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar a {
color: #cccccc !important;
}
.navbar a:hover {
color: #ffffff !important;
background-color: #646464 !important;
}
.navbar-header .navbar-brand {
color: white !important;
font-size: 1.5em;
}
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
Do you have any suggestion of how can i make it lets say 800px for wide screens
and when its loaded in tablet to be normal width of all the tablet/smartphone screen?
This might be the simplest way to do this: you can limit the container size with a custom class at whatever media query you'd like the navbar with be 800px, then just adjust the custom container color to the navbar color and the navbar background color so it matches the body or use transparent.
See working example.
body,
html {
margin-top: 55px;
}
.navbar.navbar-custom {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar.navbar-custom .navbar-nav li a {
color: #cccccc;
}
.navbar.navbar-custom .navbar-nav li a:hover {
color: #ffffff;
background-color: #646464;
}
.navbar-custom .navbar-header .navbar-brand {
color: white;
font-size: 1.5em;
}
#media (min-width: 1200px) {
.container.container-nav {
width: 800px;
background-color: #242424;
}
.container.container-content {
width: 800px;
}
.navbar.navbar-custom {
background-color: transparent;
border: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Work
</li>
<li>About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>News
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="container container-content">
<div class="alert alert-warning">Hello</div>
</div>
</body>
I want to fix the logo on the navigation bar , I want to either increase the height of navigation bar and fix it without adjusting the image size amd When i shrink the website to mobile view , The Logo is seen below the collapse button .
Preview of the website (http://threeguys.us/works/testing.html)
testing.html
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
style.css
.jumbotron
{
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
}
.container
{
padding:0px;
}
.navbar
{
height: 60px;
background-color: transparent;
border:0px;
padding-top: 0px;
}
.navbar-header
{
width:70px;
background-color: transparent;
}
ul
{
padding:0;
}
.call_button
{
margin-top : 428px;
}
.content
{
background-color: white;
padding-top:0px;
}
.footer-nav
{
text-align: center;
}
.text_order
{
background-image: url(images/text_order/rectangle.jpg);
text-align: center;
padding: 5px;
}
.text_order p
{
font-size: 20px;
}
.footer-nav li
{
display: inline;
}
.footer-nav li a
{
padding-left: 50px;
text-decoration: none;
color: #f7ab00;
}
.footer-nav li a:hover
{
color:black;
}
Based on your question, comments and screenshots here are the following recommendations:
Remove this CSS code from style.css so collapse button is on the right (and not above the logo):
.navbar-header {
width:70px;
background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}
To get the nav outside of the jumbotron whilst keeping the full image screen, perform the following updates:
Update testing.html to the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
Update your style.css jumbotron class and navbar class to the following:
.jumbotron {
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
height: 60px;
background-color: transparent;
border: 0px;
padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}
If I haven't answered all your questions please comment below so I can update my answer.
Modify the flow of your HTML. Avoid putting nav inside .container.
Use a structure like this
This will put the logo inside the header as well as put it before the collapse button in mobile view.
I'm seeing an odd layout in Safari using a bootstrap nav header. This only shows up on first page load sometimes. Refreshing the page gives the correct layout (Opening a fresh window and pasting in the url triggers the incorrect layout fairly consistently.)
Here is a picture of the current layout:
And here's the layout when I reopen the page sometimes:
I want to have the links section on the same line as the brand, positioned to the right.
Here's the relevant html (I've tried to cut it down as much as possible):
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=
"#collapser" 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="/" id="brand">
<img src=
"http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
style="height: 40px">
</a>
<ul class="navbar-nav pull-left" id="path">
<li>
a link
</li>
</ul>
</div>
<div id="collapser" class="collapse navbar-collapse">
<a class="navbar-right btn btn-default" id="navbar-login">login</a>
</div>
</div>
</nav>
</header>
And the styling:
#brand {
line-height: 50px;
padding: 0 1.2rem;
padding-right: 0;
width: 120px;
}
#path {
list-style: none;
margin: 0;
padding-top: 16px;
padding-left: 0;
}
#path li {
float: left;
}
#path li:before {
content: "/";
padding: 0 0.6rem;
}
Any thoughts on working around this odd behavior?
This seems like a Safari bug.
I solved it with following:
Absolute position the real logo.
Add a 120px (width of the logo) left margin to the #path
This was complicated by the navbar collapse section, which would shift over the #path into the logo when collapsed. The easiest solution was to wrap the #path in another .navbar-brand class, #path-nav here. Finally, Firefox needs path-nav to use float: none.
Here's the revised working example:
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=
"#collapser" 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="/" id="brand">
<img src=
"http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
style="height: 40px">
</a>
<div id="path-nav" class="navbar-brand">
<u id="path">
<li>
a link
</li>
</ul>
</div>
</div>
<div id="collapser" class="collapse navbar-collapse">
<a class="navbar-right btn btn-default" id="navbar-login">login</a>
</div>
</div>
</nav>
</header>
.
#brand {
line-height: 50px;
padding: 0 1.2rem;
padding-right: 0;
width: 120px;
position: absolute;
}
#path {
list-style: none;
margin: 0;
margin-left: 120px;
padding-top: 4px;
padding-left: 0;
}
#path li {
float: left;
}
#path li:before {
content: "/";
padding: 0 0.6rem;
}
/* for firefox */
#path-nav {
float: none;
}
Thanks for this question and providing your solution. I added "float: left" to my second tag and it did the trick.
Thanks again.