I'm using the default CSS that came with bootstrap; also using the bootstrap theme and dashboard CSS.
By default, when on xs devices, the sidebar disappears. Well, this is what i'm using for all my application's main navigation. So, I'd like for it to switch to a horizontal layout on such devices, but I can't find anything online about how to do this.
I scoured the documentation, but it's pretty lousy IMO. There should be a breakdown of all the classes and their uses. I imagine there's a class i can add that will do what I want.
Does anyone know it?
Here's the html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-1 col-lg-1 overflow-fix">
<ul class="nav nav-sidebar">
<li class="icon-center">
</i>
</li>
<li class="icon-center">
<i class="fa fa-users fa-2x" data-toggle="tooltip" data-placement="right" title="Users"></i>
</li>
<li class="icon-center">
<i class="fa fa-building-o fa-2x" data-toggle="tooltip" data-placement="right" title="Accounts"></i>
</li>
<li class="icon-center">
<i class="fa fa-sitemap fa-2x" data-toggle="tooltip" data-placement="right" title="Branches"></i>
</li>
</ul>
</div>
</div>
</div>
Turns out the .css files actually have pretty good comments so I was able to see that .sidebar class had display:none; on it. Then found the media query right under it which gets activated when on larger view ports.
Added the below to my overriding css file, and now it changes to horizontal centered menu when on small screens, then pops back to the sidebar on large screens.
.sidebar {
display:block;
border-bottom: 1px solid #eee;
}
.sidebar ul {
text-align:center;
margin-bottom:0px;
}
.sidebar ul li{
display:inline-block;
}
#media (min-width: 768px) {
.sidebar ul li{
display:block;
}
}
I'm quite new to messing with CSS, so if anyone has a suggestion for how better to format the above code, please don't hesitate to share!
The sidebar has display: none by default. This can be overriden by
.sidebar
{
display:block;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
Related
So far I have this:
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px">
<i class="fa fa-user-circle"></i>
<i class="fa fa-id-card-o"></i>
<i class="fa fa-folder-open"></i>
</div>
If I enter text into the a tag, the text ends up looking jumbled and doesn't go under the button the way I want it to. How can I fix this?
I made a codepen that should match what you are attempting to do :
Here is the css :
.w3-sidebar {
width: auto;
}
.w3-bar-block .w3-bar-item {
/* Overrides default rule */
text-align: center;
}
.sidebar-icon-label {
display: block;
font-size: 10px;
}
You'll see that I removed the inline style of your w3-sidebar, and set it to "auto" instead, which means it will have the size of its content.
I created a new class for your icon labels, and overrode a native w3 rule to center everything.
Update your code Like this
<style>
i{ width:20px;
height:20px;
display:inline-block; }
a{ float:left; width:100%; text-align:center; }
span{ float:left; width:100%; text-align:center; }
</style>
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge"
style="width:70px">
<i class="fa fa-user-circle"></i><span>Text 1</span>
<i class="fa fa-id-card-o"></i><span>Text 1</span>
<i class="fa fa-folder-open"></i><span>Text 1</span>
</div>
I created a navbar in Bootstrap and I want to make it a little bit smaller.
I somehow did that, but my content of the navbar is bigger then it should be.
I don't know how to make it smaller to fit in the navbar or should it fit auto?
Code:
<nav class="navbar-default">
<div class="container-fluid" style="padding-left:55px; height:45px;">
<div class="navbar-header">
<a class="navbar-brand" style="margin-bottom: 2px;"><i class="fa fa-facebook-square" aria-hidden="true" style="font-size:23px;" id="fb"></i></a>
</div>
<ul class="nav navbar-nav">
<li><input type="text" class="input-sm" id="usr" style="margin-top: 9px;" placeholder="Pronadjite prijatelje"></li>
<li id="nameprofile"><img src="fb%20profile%20image.jpg" width="25px" height="25px" style="margin-right: 9px;">Ime</li>
<li>Pocetna stranica<span class="badge">2</span></li>
<li id="liprijatelji"><i class="fa fa-users" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="findfriends"></i></li>
<li id="liporuke"><i class="fa fa-comments" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="poruke"></i></li>
</ul>
</div>
</nav>
Text in code is not in English because I don't speak English.
Sorry if I made a mistake.
Ok, guiding myself from the bootstrap tutorials, you would need to have <nav class="navbar navbar-default"> instead of <nav class="navbar-default">. One of the reasons of the unexpected behaviour might be because you´re not adding this class.
Since you are using the .navbar class, then all you need to do is add the following css that overrides the default values of navbar.
.navbar{
min-height: 50px;
height: 50px;
}
If you look at bootstrap defaul CSS the .navbar default values are:
.navbar {
position: relative;
min-height: 50px; //This line is the one that defines the min height, which we overrid in the code above
margin-bottom: 20px;
border: 1px solid transparent;
}
You might also need to add max-height to your css, since the container might grow if your content is bigger than your container.
Here is a working example
Maybe it's a bug, I'm not sure, but when using the mobile collapse menu, the icons and the text are not aligned (see images).
The reason is because of these CSS properties:
HTML:
.side-nav a {
color: #444;
display: block;
font-size: 1rem;
height: 64px;
line-height: 64px;
padding: 0 30px;
}
nav i.material-icons {
display: block;
font-size: 2rem;
height: 56px;
line-height: 56px;
}
<ul style="transform: translateX(0px);" class="side-nav" id="mobile-menu">
<img src="images/costum_logos/logo3.png" class="custom-logo">
<div class="divider"></div>
<a href="index.php" class="waves-effect waves-light">Albums
<i class="material-icons left notranslate">collections</i>
</a>
<a href="?page=settings" class="waves-effect waves-light">Settings
<i class="material-icons left notranslate">settings</i></a>
<a class="waves-effect waves-light red-text text-lighten-1" href="index.php?logout">Logout
<i class="material-icons left notranslate">power_settings_new</i>
</a>
</ul>
Of course, the interesting bits are the line-height and height properties on both the anchor tag, and the icon tag. They are not equal. If I override either one of them, to be exactly like the other - they are perfectly aligned.
My question is: Am I doing something wrong? I can easily get around it, but I want to have a good practice with materialize CSS. Don't wanna hack around and break their conventions.
Thanks in advance!
I am building a responsive website using Bootstrap and Less.
I have put in some social Icons using font awesome which have worked fine.
However, my logo in meant to be in the center and was before I put the social icons in but now I have added them they are pushing my logo to the left.
Here is the html
<header>
<div id="social">
<ul class="pull-right">
<li><i class="fa fa-facebook-official fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-linkedin-square fa-2x"></i></li>
<li><i class="fa fa-google-plus-square fa-2x"></i></li>
</ul>
</div>
<div class = "logomove">
<div id="logo" class="text-center">
<img src="assets/images/logo.png" alt="Logo" />
</div>
</div>
</header>
And the CSS:
#social {
li {list-style: none; display: inline-block; padding:3px; float:right; color:#brand-primary; }
}
I have also tried positioning the logo 250px across the page to try and center it but it will not work.
Any suggestions much appreciated, I'm really new to this so sorry if I am missing something.
The static positioning of your #social element is pushing the logo away. You have to make either of them absolute to make it not effect the other element.
Try like this:
header{
position:relative;
}
#social {
li {
list-style: none;
display: inline-block;
padding:3px;
float:right;
color:#brand-primary;
position:absolute;
right:0px;
top:0px;
}
}
You might need to adjust the top and right values.
I'm using a service which doesn't allow me to modify the code, but I"m able to add my own CSS. I am trying to change the CSS of a specific Link inside a li.
Here is my code:
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I want to select only the very first list item and tweak the css settings of the link within it - I want to make the background color and text different. Using the following allows me to change somethings but not the actual text within that li.
.kn-link-1 {
}
I also want to make sure that this change only happens for this specific instance where the parent id="view_81".
Can someone help find the right way to select just that
CSS is not the right place where you should change the content, anyway if you have no other choice, you could use the :after selector to do the following trick:
#view_81 > ul > li:nth-child(1) > a > span {
display: none;
}
#view_81 > ul > li:nth-child(1) > a:after {
background-color: red;
content: "your text";
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span>
</li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span>
</li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span>
</li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span>
</li>
<li class="kn-link-5"><span>Add Comments</span>
</li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span>
</li>
</ul>
</div>
have you tried:
#view_81 ul li.kn-link-1
or
#view_81 ul li:first-child
To clarify my examples: "#" selector in CSS means "the one with the following ID" and then i'm telling the "ul" that comes after that and then the "li" that comes after that which has this class "kn-link-1" or which is the first item inside the tag (:first-child subselector).
I hope some of them help.
use this style:
li:first-of-type span
{
}
also be sure that your style link is last in your style references. If this does not help, declare your styles with "!important" like here:
li:first-of-type span
{
color:red !important;
}
using the selectors: #view_81 .kn-link-1 a targets the element with id="view_81" and the descendant element with class="kn-link-1" and the a tag inside that to change the background and text color.
#view_81 .kn-link-1 > a {
background: red;
color: yellow;
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I would stylize the css like this:
<style>
#view_81 .kn-link-1{
padding: 50px;
background-color: gray;
}
#view_81 .kn-link-1 a{
text-decoration: none;
}
#view_81 .kn-link-1 span{
color: white;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
</style>
This css only applies to the class .kn-link-1 within id #view_81.
I added a little basic css for your testing purposes, but you get the point.