In bulma, how to define width of navbar to be two-thirds (when on desktop)?
When i put it into columns div, it creates a problem on mobile: extra space is created on the right side due to burgers button overflow.
And below is the screenshot of what happens: if you take a look where the hero element ends on the right side, there is a small vertical space next to the ruler.
There is also a jsfiddle here, but unfortunately it is not visible in jsfiddle. To reproduce, take the following html, save it and open it in firefox, then use mobile inspector with ctrl+m.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="has-background-black">
<div class="columns is-centered">
<div class="column is-two-thirds">
<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="Logo">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-white" href="/posts">
Posts
</a>
<a class="button is-white" href="/tags">
Tags
</a>
<a class="button is-white" href="/about">
About
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<section class="hero has-background-dark">
<div class="hero-body">
<div class="columns is-centered">
<div class="column is-two-thirds">
<p class="title has-text-white">
Title
</p>
<p class="subtitle has-text-white">
Description
</p>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>
</body>
</html>
This is because columns class has negative margins. To fixed it you can add extra classes for columns and column.
index.html
<body class="has-background-black">
<div class="columns nav-columns is-centered">
<div class="column nav-column is-two-thirds">
...
</div>
</div>
</body>
style.css
.nav-columns {
margin-inline: 0;
}
.nav-column {
padding-inline: 0;
}
Related
Explanation
I'm using Bulma to create a divided page with a fixed Navbar, but as you can see below, Title 1 and Title 2 won't line up with Navbar and Title 3, since the container left/right margin is set to auto and, therefore, goes to 0 in this first section configuration. Is there any way to achieve this using Bulma?
The problem starts happening in 1024px or higher.
Code
I've changed the container background color to yellow so it's easier to see the issue.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.0/css/bulma.min.css" />
</head>
<style>
.container {
background-color: yellow;
}
</style>
<body>
<nav class="navbar is-fixed-top" role="navigation" style="background-color: transparent;">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
</div>
</div>
</nav>
<section class="columns is-vcentered is-gapless mb-0">
<div class="column">
<div class="hero is-fullheight is-info">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 1
</h1>
</div>
</div>
</div>
</div>
<div class="column">
<div class="hero is-fullheight is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 2
</h1>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-fullheight is-success">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 3
</h1>
</div>
</div>
</section>
</body>
I'm trying to integrate the slide into my navigation. Here is the slide that I am trying to integrate.
Here is the code I'm working on and the website is rosannalui.com. I'm a bit stumped what I'm doing wrong and any help would be greatly appreciated. Thank you so much!
<html>
<head>
<title>Rosanna Lui</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400" rel="stylesheet">
<link href="https://fonts.go``ogleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="style.css?v=1" rel="stylesheet">
<meta name="viewport" content="width=700">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #9E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
</style>
</head>
———
<div class="container-fluid">
——
<body class="bodyhome">
<!-- Menu -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<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>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a class =“menuhello” href="#">Hello</a></li>
<li><a class =“menuwork” href=“#work”>Work</a></li>
<li><a class =“menucontact” href=“#contact”>Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<!-- Hello -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="hello" class="darkgray">
<div id="hellotext">
<h1>I'm Rosanna, a visual and UX designer, and I am passionate about making <span class="bluetext">delightful</span> experiences.</h1>
</div>
</div>
<!-- Dots -->
<script>
particlesJS.load('hello', 'particles.json', function() {
console.log('hello#rosannalui.com');
});
</script>
</div>
<div id="section2" class="container-fluid">
<!-- Work -->
<a name="work"></a>
<div class="grid">
<div class="work work1">
<a href="./bee/">
<h2>Bee Adventurous</h2>
<h3>Augmented Reality Game</h3>
</a>
</div>
<div class="work work2">
<a href="./husky">
<h2>Husky Checkout</h2>
<h3>Equipment Rental Application</h3>
</a>
</div>
<div class="work work3">
<a href="./chord">
<h2>Chordinate</h2>
<h3>Networking App for Musicians</h3>
</a>
</div>
<div class="work work4">
<a href="./design">
<h2>Design Work</h2>
<h3>Illustration and Design</h3>
</a>
</div>
</div>
</div>
<div id="section3" class="container-fluid">
<!-- Contact -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<a name="contact"></a>
<div class="lightgray contact content">
<img src="images/rosanna.png" style="margin-top: -3vw" />
<div>
<h3>Rosanna Lui</h3>
<p>
I am a recent Interactive Media Design graduate at the University of Washington. Inspired by my background as a daughter of immigrants, I believe that it is important to design with the user in mind and to create content that is accessible to everyone.
I am always looking for new projects and opportunities to collaborate with others.
</p>
<p>
Email me: hello#rosannalui.com
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</body>
</html>
For a quick and dirty solution use:
html{
scroll-behavior: smooth;
}
Note that not all browsers support this.
Another quick way is to use jump.js.
Add this to your head:
<script src="https://rawgit.com/jumpjs/jumpjs/master/dist/jumpjs.min.js"></script>
I want my cordova app to look less like a web app and more like a real app by eliminating left and right scroll.
I've set the overflow-x property to hidden on the html and body tags, and that works for all but the page below, which scrolls left and right but shouldn't.
Have I misconstructed the grid? I've tried to apply the "overlow-x: hidden" property to an enclosing div instead of the body and html as suggested elsewhere, tried applying the property to the individual divs, attempted limiting width on the divs. I've tried changing the html position to fixed (which fixes the left-right scroll but also stops up down which I need). You can view the page below on an iOS device to see the behaviour here. Which of my lousy skillsets -- css, html, or bootstrap -- is letting me down here?
<!DOCTYPE html>
<html lang="en" style="position: relative; min-height: 100%;">
<head>
<meta charset="utf-8" />
<title>
My Awesome Title
</title>
<meta name="generator" content="BBEdit 11.0" />
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/entypo.min.css">
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js">
</script>
<script type="text/javascript" src="scripts/bootstrap.min.js">
</script>
<script type="text/javascript" src="scripts/bootbox.min.js">
</script>
<style>
html, body {
overflow-x: hidden !important;
}
</style>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;">
<h2 class="text-center">
My Awesome Title
</h2>
<br />
<div id="hexpix" class="center-block">
<br /><br />
<div id="hexpixdiv">
</div>
</div>
<!-- Alert Space -->
<div id="AlertSpace" class="center-block" style="text-align:center; width:75%">
</div>
<br />
<!-- Hex Content Space for text -->
<div id="hexindex" class="text-center">
</div>
<!-- hexindex close -->
<div id="hexcontent" class="text-center">
<!--
<p>
Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why?
<p>
-->
</div>
<!-- hexcontent close -->
<div id='HelpButton'>
</div>
</div>
<!-- Column class close-->
</div>
<!-- Row class close-->
<br />
</div>
<!--Container close-->
<div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;">
<div class="row">
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Reddit">
<span>
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="SMS">
<span class="icon-export">
</span>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Email">
<span class="icon-gmail">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Twitter">
<span class="icon-twitter">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Facebook">
<span class="icon-facebook">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="tumblr">
<span>
</span>
</a>
</div>
</div>
<!-- Row -->
</div>
<!-- Sharestrip -->
<div id="footer" style="position: absolute;
bottom: 0;
width: 100%; height: 20px;">
<!-- See hex.css for custom css on this -->
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)"
<span class="nav-link">
1
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
2
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
3
</span>
</a>
</div>
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<!-- End Navbar -->
</div>
<!-- End Footer -->
</body>
</html>
When you set overflow: hidden to element it doesn't mean it stops to be scrollable... it just hides the scrollbar. Since mobile devices scroll contents when touching anywhere on the element, it just remains scrollable.
The fact is - your website is scrollable on X-Axis even on desktop devices, you just hide it by using overflow-x: hidden on body tag.
The reason why your website is x-scrollable on all devices is that you forgot to add class="container" to <div id="sharestrip"... and the row inside it has 100%+15px(left margin)+15px(right margin) which is bigger than window width.
This behaviour is reduced by .container by it's padding-left: 15px and padding-right: 15px, so simply you need to remember of adding class="container" to parent of the row.
I am coding a website using onepage-scroll, and I'm encountering a very strange issue. In my last section (fourth), I added some content (notify me!), it displayed perfectly, and now I did something else (added scripts) and all the content disappeared.
Demo here: https://opencubes.github.io/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OpenCubes</title>
<link rel="stylesheet" href="stylesheets/styles.css">
...
<script type="text/javascript" src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function () {
$(".main").onepage_scroll({
sectionContainer: "section",
...
direction: "vertical"
});
$('a.notify').on('click', function () {
...
});
});
</script>
</head>
<body>
<div class="main">
<section class="first-page">
<div class="description">
<h1>The Minecraft Mod Marketplace</h1>
<div>
OpenCubes...
</div>
</div>
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Scroll Down
</a>
</section>
<section class="second-page">
<div class="description">
<h1>Browse mods</h1>
<div>
With OpenCubes,...
</div>
</div>
<img src="images/browse.png" />
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Keep scrolling...
</a>
</section>
<section class="third-page">
<div class="features">
<div class="feature-spotlight sl-1">
<div>
<h2>Comment and vote</h2>
...
</div>
<img src="images/comments.png" />
</div>
<div class="feature-spotlight sl-2">
<img src="images/files.png" />
<div>
<h2>Files and version manager</h2>
In OpenCubes,...
</div>
</div>
</div>
</section>
<section class="fourth-page">
<div class="main">
<h1>OpenCubes is still in development.</h1>
<div class="send">
<h2>Enter your email here to be notified when it's ready</h2>
<input class="email" type="email"/>
Notify me!
</div>
</div>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>
I'm building a site with the latest Twitter Bootstrap using the responsive features.
My problem is that I have two lists that appear side by side, but when the viewport width is less than 768px wide they appear stacked despite there being enough space for both of them to fit. How can I fix this?
Also, a couple of minor things: In the footer I have a strange A symbol appearing before the copyright symbol...how do I sort this out? Also, in IE two elements don't appear inline like they do on all other browsers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3 phone_numbers">
<img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="navbar_link navitem1"><strong>HOME</strong></li>
<li class="divider-vertical navitem2"></li>
<li class="navbar_link navitem3"><strong>GALLERY</strong></li>
<li class="divider-vertical navitem4"></li>
<li class="navbar_link navitem5"><strong>ABOUT US</strong></li>
<li class="divider-vertical navitem6"></li>
<li class="navbar_link navitem7"><strong>CONTACT</strong></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid content">
<div class="span6">
<div id="homepage_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid homepage_text">
<div class="span12">
<h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12 icon_container">
<img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
<h5 class="redtext grid_item grid_text">Northampton Based</h5>
<img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
<h5 class="redtext grid_item grid_text">Free Quotes</h5>
</div>
<div class="span12 icon_container2">
<img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
<h5 class="redtext grid_item grid_text">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
<h5 class="redtext grid_item grid_text">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1 lists">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3500
})
</script>
</body>
The CSS is here: http://gw.gd/Ooky
Thanks in advance.
As #Omega noted, the stacking of columns <768px is the default Bootstrap behaviour. You can override this with some custom CSS though. Here's a post with a similar question: Stack elements in twitter bootstrap media grid differently
Regarding the strange symbol in your footer, start by checking that your header includes:
<meta charset="UTF-8">
Good luck!