I need a sticky responsive sidebar like this sites https://www.localbanya.com/ &
https://redmart.com/ please help I was searching it from weeks but had no success. And it will be helpful if it's bootstrap compatible.
Checkout Semantic-UI's sidebar. It works just like bootstrap.
Here is the html:
<body>
<div class="ui sidebar inverted vertical menu">
<a class="item">
1
</a>
<a class="item">
2
</a>
<a class="item">
3
</a>
</div>
<div class="pusher">
<!-- Site content !-->
</div>
</body>
And to activate the toggle using javascript:
$('.ui.sidebar').sidebar('toggle');
Related
I as trying to make a pointing drop down, and it is as Semantic UI's documentation says it should be, but it didn't open to the side when I click,I might be missing something, can you guys help me?
<pre>
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Imagem
<div class="menu">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
</pre>
The Semantic UI dropdown module requires some JavaScript for it to work properly. To just get the menu to show, you can use angular to perform the necessary Javascript work.
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item" ngClass="{'visible': showMenu, 'active': showMenu}">
<i class="dropdown icon" (click)="showMenu = !showMenu"></i>
Imagem
<div class="menu" ngClass="{'visible': showMenu, 'hidden': !showMenu}">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
This won't apply the classes with the proper timing though to do the animations that Semantic UI provides as well. To do that you will have to load the requisite js libraries(jQuery and semantics js files) and get them to play nicely with Typescript.
Hi guys got a simple question about bootstrap, trying to make a footer resposive but for some reason i cant seem to do it, any help on making this footer resposive for mobiles etc would be great.
So far i have:
Not sure what i should be doing, new to this :0
Thanks for the help
Not really sure what kind of look your going for but if you are looking for but assuming that you are going for something that has a left and right section and then at mobile sizes stacks to make it more viewable you can do something like the following:
Here is a fiddle to show you the result Fiddle Demo
<footer>
<div class="container">
<div class="row">
<div class="col-sm-8 footer-left">
<img class="footer-logo" src="http://placehold.it/250x250" />
Link
Link
Link
Link
</div>
<div class="col-sm-4 footer-right">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-instagram" href="#"></a>
</div>
</div>
</div>
</footer>
And responsive Css
#media screen and (min-width:768px){
.footer-right{text-align:right;}
}
#media screen and (max-width:767px){
.footer-left, .footer-right{text-align:center;}
.footer-logo{display:block;margin:5px auto;}
}
To give you an example of how you can structure your HTML:
footer{
background-color:yellow;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<footer class="col-sm-12">
<div class="row">
<p class="col-sm-6 pull-left">Left content</p>
<p class="col-sm-6 pull-right">Right content</p>
</div>
</footer>
</div>
Learn about Bootstrap Grid system: http://getbootstrap.com/css/#grid
Simple Bootstrap Layout
Here is a working jsfiddle of your missing elements: https://jsfiddle.net/odx59t0p/
<div class="logo1">
<img src="Image/Logo.png" class="img-responsive"/>
<div class="col-sm-3">
<p>Reference/About
</div>
</div>
Please note: The only things that have been added are:
Links to required CSS / JS files (which you should already have in your head tags)
"row" class to "navbar-text"
"col-sm-*" classes to divs around menu items.
I just started learning HTML and CSS a week ago, and have been learning using coursera and codeacademy. I wanted to make a simple website using bootstrap, with a navigation bar on top, and a big cover pic below that.
The code looks as follows.
<body>
<header class="container">
<div class="logo"> <!--this is where the logo resides-->
<div class="row"> <!--making a row for header elements-->
<figure class="col-xs-7">
</figure>
<div class="col-xs-5" > <!--adds the 3 buttons on top right-->
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="row">
<figure class="col-xs-12"> </figure> <!--cover pic-->
</div>
</div>
</body>
</html>
When I open the html in the browser (with the style sheet), I get the image attached. enter image description here. I though the cover pic would automatically align within the 12 column grid below the navigation bar on top, cropping out the sides. My questions are:
1. Doesn't adding an image automatically fit it in the 12 grid system?
2. How do I push the 3 icons on top to the right of the navigation bar (i.e to the right of the column)?
Thanks a ton guys! I'm grateful for any advise or suggestions in advance.
I think the jumbotron class is formatted purposely to reach the edges of the page.
If I am understanding your question correctly in that you do not want the jumbotron to extend to the edge of the screen, you may want to Place the jumbotron inside the div class="container" as W3CSchools suggests
Bootstrap v3 is neat because it has already created tools like the nav bar. You could try using an using the "< nav >" tag and an unordered list like so:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<!--- image of your logo -->
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
I'm using foundation CSS to make the website mobile responsive. Part of that is the menu that opens on the left side when viewed on any mobile devices. The menu looks great on all platforms except Safari on iOS device. Whenever I click on the hamburger icon on my app the off-canvas menu opens up but the content is empty.
Foundation core version is 5.4.5
The following is the HTML code for the menu.
<header id="header">
<nav class="tab-bar header hide-for-large-up" data-options="is_hover: false" data-topbar="" role="navigation">
<section aria-expanded="false" class="left-small left-off-canvas-toggle">
<div class="fi-list"></div>
</section>
<section class="middle tab-bar-section">
<a class="name" href="/" title="My App">My App</a>
</section>
<section class="right-small tab-header search" id="search">
<div class="fi-magnifying-glass"></div>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Personal Care</label>
<div class="container">
After Shave
Body Wash & Cleanser
</div>
</li>
<li>
<label>Food</label>
<div class="container">
Breads & Baked Goods
Breakfast
</div>
</li>
<li>
<label>Household</label>
<div class="container">
Air Fresheners
Dishwashing
</div>
</li>
</ul>
</aside>
</header>
You can see the screen capture video of the behavior here https://youtu.be/NQGnqWBHVuc.
If you notice carefully, when I close the menu, the menu flashes for a second before it closes. Can someone help me out please? Thanks.
I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default).
I have found nothing in the documentation to indicate that this is possible, so presumably the solution is to modify it with CSS?
Any help would be greatly appreciated.
Use the semantic ui class "compact" for your UI menus to adjust to content, and then use grids and columns for center alignment.
So for example:
<div class="ui centered grid">
<div class="center aligned column">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/pLskpufp/2/
You can also just use a center aligned container:
<div class="ui center aligned container">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/377v6ect/1/
I know it's not a pure Semantic UI solution, but for those of you looking for a way to do this with a fixed menu in Semantic UI, the best solution I've found so far is to wrap it in a div with a little custom CSS.
<div className="fixed bottom">
<div className="ui centered grid">
<div className="center aligned column">
<!-- Your Semantic UI menu here, but not fixed. -->
</div>
</div>
</div>
Along with this css...
div.fixed {
width: 100%;
position: fixed;
}
div.fixed.bottom {
bottom: 0;
}
div.fixed.top {
top: 0;
}
I have searched on the semantic forums and other places; created mine.. Hope works for you too.
<div class="ui center aligned container">
<div class="ui" style="background-color: #009999;">
<!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
<div class="ui centered small image" >
<a href="#">
<img class="logo" src="./logo_white.png">
</a>
</div>
<!-- </a> -->
</div>
</div>