i pretend to make this first column fixed, but when i add position:fixed, the columns overlap each other, how to fix this?
If its not possible, i want to know a sample that gives me a
side navbar fixed and responsive with bulma
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
```
As I understood, your sidebar disappears on mobile, right?
Have you tried removing is-hidden-mobile class from aside element?
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Related
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
I want to put the ul next to each other so that they are side by side. I tried using inline-block and float left, but it looks messy.
.left{
position:absolute;
padding-left:200px;
}
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
You can do it like this. This is one way.
I'm not a good developer since I'm only a student. I'm trying to make a website for me but I can't align-items on my rows in bootstrap. I'm trying to do this:
1 but I'm stuck on this:
<div class="container-fluid">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
</div>
<div class="row align-items-end">
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
Can someone help me?
The items just don't align like i want them to
For this to work you need to put every element in single row. You have 3 rows.
Imagine row like this
Every line represent single row. If you put content in one row element it will be displayed in single line. If you put in more rows content will be displayed in more rows.
So your code should look like this
<div class="container-fluid">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
If this doesn't help then I didn't understood you correctly so come back here so we can fix it :)
UPDATE
Based on new info I got this should be new solution
<div class="container-fluid top">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
</div>
</div>
<div class="container-fluid center">
<div class="row align-items-center">
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid bottom">
<div class="row align-items-end">
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
.top {
position: aboslute;
top: 0;
}
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bottom {
position: absolute;
bottom: 0;
}
align-items property depends on the height row. For this you can set height for row
Please help. That's my problem (see the screenshot below):
As you can see the navigation bar is underneath the image. This is my code:
<div class="navwrapper">
<header class="nav">
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
<img class="d-none d-md-block d-none" src="logo.png" alt="">
</div>
<div class="menu">
<ul>
<li>FŐOLDAL</li>
<li>RÓLUNK</li>
<li>RENDELÉS</li>
<li>KAPCSOLAT</li>
</ul>
</div>
</nav>
</header>
<section class="bg">
<section style="text-align:center;vertical-align:middle" class="sec1">
<img class="animated bounceInDown" src="logo.png" alt="">
</section>
</section>
</div>
$(document).ready(function() {
$('.parallax').parallax();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper container">
Vowel
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>About us</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="parallax">
<img src="images/london.jpg">
</div>
</div>
<div class="row container">
<h2>Title text</h2>
<p>Lorem ipsum</p>
</div>
<div class="row container">
<h2>Title text</h2>
<p>Lorem ipsum</p>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/nyc.jpg">
</div>
</div>
<div class="row container">
<h2>Title text</h2>
<p>Lorem ipsum</p>
</div>
<div class="row container">
<h2>Title text</h2>
<p>Lorem ipsum</p>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/nyc.jpg">
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and
columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5><ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script type="text/javascript" src="js/materialize.min.js"></script>
I know that this question was here before but I couldn't solve my problem at all. I don't know why my paralax doesn't work. I don't have any CSS for that nor other scripts. Any thoughts what might be my problem? I downloaded jquery as well and put to the folder where I have my website files, it didn't work. I tried different versions, and I pasted one script below/above the other to see if can work - it didn't.
Are you sure the parallax function calling is written below the library files linked
<link href="css/materialize.min.css" rel="stylesheet"/>
<script src="js/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<script>
$(document).ready(function() {
$('.parallax').parallax();
});
</script>
Working with Twitter Bootstrap 2.3.5.
Well basically, my structure is that I have a fixed sidebar on the left (span4) and a main content area on the right (span8, #main)
Within #main I have placed a .hero-unit and after that a row that should contain two columns, both spam4.
Here is a shortened version of my code:
...
<div class="span8 offset4" id="main">
<div class="hero-unit">
....
</div>
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
My problem now is that the #main-left and #main-right is now placed outside the container.
What seems to be the problem with my code?
Minus your ID's and any custom classes, this should work for you:
<div class="container">
<div class="row">
<div class="span4">
<p class="text-center"><img class="img-circle" src="http://placehold.it/100x100" /></p>
<p>Look at this stuff, isn't it neat wouldn't you think my collection complete. Wouldn't you think Im a girl a girl who has everything.</p>
<ul class="nav nav-tabs nav-stacked">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
<div class="span8">
<div class="hero-unit">
<h1>Hero Unit</h1>
</div>
<div class="row">
<div class="span4">
<h3>Head here</h3>
<p>I've heard it said, that people come into our life...</p>
</div>
<div class="span4">
<h3>Head here</h3>
<p>Like a comet pulled from orbit as it passes the sun...</p>
</div>
</div>
</div>
</div>
</div>
View Demo Here
May be this could help you..
<div class="span8 offset4" id="main">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
....
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span6" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
See comments regarding nesting columns and rows. But try this:
<div class="container">
<div class="row">
<div class="span4">
The sidebar content
</div>
<div class="span8" id="main">
<div class="row">
<div class="hero-unit">
....
</div>
</div>
<div class="row">
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
</div>
</div>