I'm using the Foundation CSS framework create and off-canvas-menu, however, when I click the off-canvas-toggle anchor, the menu slides in and covers the entire screen. I am unable to get out of the menu. The example on the foundation page (http://foundation.zurb.com/docs/components/offcanvas.html) doesn't have this problem. Am I doing something wrong/missing something?
<div class="fill-h off-canvas-wrap move-right">
<div class='fill-h inner-wrap'>
<aside class="left-off-canvas-menu">
Left off canvas menu
</aside>
<div class="row fill-h">
<div class="xlarge-2 large-3 medium-1 columns show-for-medium-up fill-h" id="a">
<div class='row' id='navTabs'>
<div class='small-4 columns active'><img src='/img/icon.png' /><br/>Current</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>New</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>Phone</div>
</div>
<div id="navListing" ui-view="vw-listing">
</div>
<div id='nav_footer' class='small-12'>
<div id="adminMenuBtn">
Admin
</div>
footer
</div>
</div>
<div class="xlarge-10 large-9 medium-11 columns" ui-view="vw-details2">
<div style='background-color:#333;float:left;'>
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</div>
<div ng-include="views/interactions/details-blank.html"></div>
</div>
</div>
<a class="exit-off-canvas"></a>
</div>
</div>
Related
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
I'm trying to make the images in the slider to be full width or responsive.
The HTML is here on PasteBin
<div class="main-slider slider-pro" id="main-slider" data-slider-width="100%" data-slider-height="850px" data-slider-arrows="true" data-slider-buttons="true">
<div class="sp-slides">
<!-- Slide 1-->
<div class="sp-slide">
<img class="sp-image" data-large="assets/media/components/b-main-slider/bg-1.jpg" src="assets/media/components/b-main-slider/bg-2.jpg" alt="slider" />
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="main-slider__info sp-layer" data-width="100%" data-show-transition="left" data-hide-transition="left" data-show-duration="2000" data-show-delay="1200" data-hide-delay="1200">welcome to koka</div>
<div class="main-slider__title sp-layer" data-width="100%" data-show-transition="left" data-hide-transition="left" data-show-duration="2000" data-show-delay="1200" data-hide-delay="1200">
<div class="typed-strings">
<ul>
<li>welcome to <span class="main-slider__title-emphasis">WELCOME</span></li>
<li>PROFITABLE <span class="main-slider__title-emphasis">DIGITAL MARKETING</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Basically the images from the slider are shown only on the left side (70% of the slide). While in the right side of the slide, there is an empty space. (30%)
I'm having trouble style/adding a header above my navbar. I was able to add the header but the alignment is completely off.
I'm trying to have it align with the first navbar button. May I ask how do I create/edit my header such that it'll align with the navbar.
<div class="container" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
http://codepen.io/anon/pen/RrwvNa
I was able to get it to align using this code
<nav class="navbar" style="background-color: #00a3a3;">
<div class="container-fluid col-sm-1">
</div>
<div class="col-sm-7">
<div>
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</nav>
but there seems to be a space between the header and the nav bar.
Here is the solution. Take a look in Codepen
Change your container to container-fluid and use margin-left:8.5% in your h1 header.
<div class="container-fluid" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="margin-left:8.5%;color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
I am currently using bootstrap on a website which is displaying an ecommerce store.
The current layout is 3 columns of items within 4 rows, but I am wanting to implement a button which will change it to 2 columns.
I have done so, however the code seems to be causing some issues in that the layout changes to
Two Items
One Item
Two Items
One Item
Each one Item row has a large area of white space where an item could go.
The Code below shows one "Row" which is in the three column layout. I have used javascript which changes the class 'col-sm-4' to 'col-sm-6'. Where is my mistake here?
<div class="row"><!-- row 2 -->
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/raina_parka.png" class="product-image">
</div>
<div class="row product-status">
<span class="products-status-sale">Sale</span>
</div>
<div class="row">
<p class="product-name col-sm-12"<p>Raina Waterproof Parka</p>
</div>
<div class="row product-price">
<span>£99.00</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/april_jacket.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p class="product-name col-sm-12">April Waterproof Front Pocket Jacket</p>
</div>
<div class="row product-price">
<span>£99.95</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/free_delivery.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p></p>
</div>
<div class="row product-price">
<span></span>
</div>
</div>
</div><!-- end row 2 -->
The columns should only add upto 12. When you change 4 to 6 its becomes 18.
<div class="row">
<div class="col-lg-4"></div><div class="col-lg-4"></div><div class="col-lg-4"></div>
</div>
Problem solved. I just had to remove all of the rows and tweak the JS to add the class
This is driving me nuts....as per this page http://kudosoo.com/twofolio.html
there is an issue with the left nav working correctly.The top part of the menu disappears upon loading. I've tried adjusting the css and html in different ways to solve this but nothing has worked to date.
I believe its linked to the either the #container or how the drop dwon menu is showing on the page, seems to be sitting on top of the menu.
Any help is gratefully received.
Main page code is below. Example page is here
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="all-elements">
<div id="sidebar" class="page-sidebar">
<div class="page-sidebar-scroll">
<div class="sidebar-controls">
</div>
<div class="sidebar-header">
<img class="sidebar-logo round-decoration" src="images/general-nature/8s.jpg" alt="img">
<h4 class="center-text">kudosoo</h4>
<em class="center-text">Get badged today</em>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Navigation</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items"></div>
<div class="nav-item">
Home<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Activity<em></em>
<div class="nav-item-submenu active-submenu">
<div class="sidebar-decoration"></div>
Received <em class="unselected-sub-nav"></em>
Awarded <em class="unselected-sub-nav"></em>
Friends <em class="unselected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Select Badge<em class="dropdown-nav"></em>
<div class="nav-item-submenu">
<div class="sidebar-decoration"></div>
Wide item Portfolio <em class="selected-sub-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
My Profile<em class="unselected-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
<div class="sidebar-breadcrumb">
<div class="sidebar-decoration"></div>
<p>Let's get social!</p>
<div class="sidebar-decoration"></div>
</div>
<div class="navigation-items">
<div class="nav-item">
Facebook<em class="link-nav"></em>
</div>
<div class="sidebar-decoration"></div>
<div class="nav-item">
Twitter<em class="link-nav"></em>
</div>
</div>
<div class="sidebar-decoration"></div>
<p class="sidebar-copyright center-text">Copyright 2014.
<br>All rights reserved.</p>
</div>
</div>
<div id="content" class="page-content">
<div class="content-controls solid-color fixed-header">
<em class="content-title">Who's getting Kudosoo today?!</em>
LogOut
</div>
<div class="fixed-header-clear"></div>
<!---HTML code not to change ends-->
<div class="content">
<div id="container">
</div>
<!--Search options to find firends, requests and rejections-->
<div id="friendsfilter">
<form id="friendsfilter">
<div class="error" style="display:none"></div>
<div class="form-group">
<div class="input-group input-group-hg input-group-rounded">
<span class="input-group-btn">
<button id="find_button" type="button" class="btn"><span class="fui-search"></span>
</button>
</span>
<input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" />
</div>
</div>
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_Friends">
<option value="0">Click to manage friend connections</option>
<option value="f_connected">Friends</option>
<option value="f_requests">Requests</option>
<option value="f_rejected">Declined</option>
<option value="f_sent">Sent</option>
</select>
<div id="FriendsConnected"></div>
<div id="FriendsPending"></div>
<div id="FriendsRejected"></div>
<div id="FriendsSent"></div>
</form>
</div>
<!--Friends profile info and stats-->
<div id="container friendsProfile">
<form>
<div class="error" style="display:none"></div>
<button id="friendsProfile" class="button button-red">Unfriend</button>
</form>
</div>
<!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found-->
<div id="container">
<img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image">
<div id="userimgs"></div>
</div>
<div id="container" class="container no-bottom">
<!---List of connected friends is generated from script below, the different divs split the results depending which button is clicked-->
<div id="containerFriends"></div>
<div id="containerFriendsPending"></div>
<div id="containerFriendsRejected"></div>
<div id="containerFriendsRequestSent"></div>
<div id="containerFriendsConnected"></div>
<div id="containerFriendsProfile"></div>
</div>
<!--Displays friends uploaded badges after the user clicks on their profile picture-->
<div id="container">
<div id="badgeimgs"></div>
</div>
</div>
</div>
</div>
</div>
<!--Footer stuff-->
<div class="container">
<div type="button" id="decline" class="btn btn-danger mrs"></div>
<div class="footer-socials">
</div>
<p class="copyright uppercase center-text no-bottom">Copyright 2014
<br>All rights reserved</p>
</div>
<div style="height:350px"></div>
</div>
</div>
So, as I can see it.. really, the navigation shouldn't be showing at all when the page is loaded, correct? As the navigation is shown when the main page content is slid to the right?
z-index is used to order the layers of divs in HTML. The higher the number, the more 'forward' it will be placed on the page (back to front).
Currently, your <div id="content"> has a z-index of 10, whilst your <div id="sidebar"> has a z-index of 2.
This means your Content div will be placed infront of your Sidebar div, causing the top of the sidebar to be hidden.
Changing these values in your CSS file will change the order.
.page-content is on line 9 of your style.css file
.page-sidebar is on line 25 of your style.css file
i think in line 135 you closed the div wrong
remove closing div from line 135 and place in the end of side bar code at line 162
<div class="nav-item">
Close<em class="unselected-nav"></em>
</div>
</div>
Make the Z-index of your sidebar to 11. Your page content has z-index of 10
<div id="sidebar" style="z-index:11" class="page-sidebar">
I actually resolved this by adjusting <div style="height:350px"></div> to
<div style="height:3350px"></div> worked. The menu now works as expected. Not shown when the page loads, but shown in full when the button is clicked to display it.