- Posts: 13
- Thank you received: 0
No mobile device responsiveness although bootstrap
11 years 9 months ago #185143
by bdonner
No mobile device responsiveness although bootstrap was created by bdonner
-- url of the page with the problem -- :
www.aavameri.fi/fi/kauppa.html
-- HikaShop version -- : 2.3.5 essential
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.3.29
-- Browser(s) name and version -- : all
-- Error-message(debug-mod must be tuned on) -- : none
Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below:
In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( www.aavameri.fi/fi/kauppa.html ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance www.aavameri.fi/fi or www.aavameri.fi/fi/kurssit.html ). Any idea what is wrong?
I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled.
Very thankful for any help!
Regards Ben
-- HikaShop version -- : 2.3.5 essential
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.3.29
-- Browser(s) name and version -- : all
-- Error-message(debug-mod must be tuned on) -- : none
Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below:
In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( www.aavameri.fi/fi/kauppa.html ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance www.aavameri.fi/fi or www.aavameri.fi/fi/kurssit.html ). Any idea what is wrong?
I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled.
Very thankful for any help!
Regards Ben
Please Log in or Create an account to join the conversation.
- PolishedGeek
-
- Offline
- Official HikaShop Development Partner
11 years 9 months ago #185145
by PolishedGeek
~ Deb Cinkus, CEO
Polished Geek: more with monday․com
eCommerce Business Process Automation Experts
Replied by PolishedGeek on topic No mobile device responsiveness although bootstrap
Are you using the latest version released Dec 24th? It has a ton of improvements, many of them related to responsiveness:
www.hikashop.com/support/support/documen...ashop-changelog.html
~ Deb Cinkus, CEO
Polished Geek: more with monday․com
eCommerce Business Process Automation Experts
Please Log in or Create an account to join the conversation.
11 years 9 months ago #185146
by bdonner
Replied by bdonner on topic No mobile device responsiveness although bootstrap
Thanks for your reply PolishedGeek, yes I bought an update today to test if this is a version issue, but the update did not help 
.
Ben
.Ben
Please Log in or Create an account to join the conversation.
11 years 9 months ago #185154
by bdonner
Replied by bdonner on topic No mobile device responsiveness although bootstrap
I now reinstalled the Joomla 3.x Protostar template and enabled it for a hikashop menu item (
www.aavameri.fi/fi/kau3
), and with it the layout behaves as I would expect it to behave -- so the problem is a conflict between my joomspirit 82 template's css and hikashop's :(.
A basic product listing page behaving correctly using the protostar template: www.aavameri.fi/fi/kau3
and an exact copy of that product listing page, but now using the site's Joomspirit 82 template: www.aavameri.fi/fi/kau4
Firebugging the css, I cannot find what causes the screwed-up layout when making the screen size more narrow, if anyone more skilled in css has any ideas I am very thankful!
Regards Ben
A basic product listing page behaving correctly using the protostar template: www.aavameri.fi/fi/kau3
and an exact copy of that product listing page, but now using the site's Joomspirit 82 template: www.aavameri.fi/fi/kau4
Firebugging the css, I cannot find what causes the screwed-up layout when making the screen size more narrow, if anyone more skilled in css has any ideas I am very thankful!
Regards Ben
Please Log in or Create an account to join the conversation.
11 years 9 months ago #185159
by nicolas
Replied by nicolas on topic No mobile device responsiveness although bootstrap
Hi,
The issue is that your template doesn't have the responsive CSS part of bootstrap in it while protostar do have it.
Here is the CSS of the protostar template that does the responsive:
You can find it here:
www.aavameri.fi/templates/protostar/css/template.css
Now, you might not need/want all of it, but at least the parts relative to the span4, span6, span8, etc.
The best would be to contact your template provider for more precise help on that boostrap CSS of their template.
The issue is that your template doesn't have the responsive CSS part of bootstrap in it while protostar do have it.
Here is the CSS of the protostar template that does the responsive:
Code:
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
.visible-print {
display: none !important;
}
@media print {
.visible-print {
display: inherit !important;
}
.hidden-print {
display: none !important;
}
}
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
.container-fluid {
padding: 0;
}
.dl-horizontal dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
.dl-horizontal dd {
margin-left: 0;
}
.container {
width: auto;
}
.row-fluid {
width: 100%;
}
.row,
.thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: none;
margin-left: 0;
}
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.span12,
.row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
display: block;
width: 100%;
min-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block;
width: auto;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 0;
}
}
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0,0,0);
}
.page-header h1 small {
display: block;
line-height: 18px;
}
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-horizontal .controls {
margin-left: 0;
}
.form-horizontal .control-list {
padding-top: 0;
}
.form-horizontal .form-actions {
padding-left: 10px;
padding-right: 10px;
}
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
.media-object {
margin-right: 0;
margin-left: 0;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.carousel-caption {
position: static;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px;
}
.span12 {
width: 724px;
}
.span11 {
width: 662px;
}
.span10 {
width: 600px;
}
.span9 {
width: 538px;
}
.span8 {
width: 476px;
}
.span7 {
width: 414px;
}
.span6 {
width: 352px;
}
.span5 {
width: 290px;
}
.span4 {
width: 228px;
}
.span3 {
width: 166px;
}
.span2 {
width: 104px;
}
.span1 {
width: 42px;
}
.offset12 {
margin-left: 764px;
}
.offset11 {
margin-left: 702px;
}
.offset10 {
margin-left: 640px;
}
.offset9 {
margin-left: 578px;
}
.offset8 {
margin-left: 516px;
}
.offset7 {
margin-left: 454px;
}
.offset6 {
margin-left: 392px;
}
.offset5 {
margin-left: 330px;
}
.offset4 {
margin-left: 268px;
}
.offset3 {
margin-left: 206px;
}
.offset2 {
margin-left: 144px;
}
.offset1 {
margin-left: 82px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-left: 2.127659574%;
*margin-left: 2.0744680846383%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574%;
}
.row-fluid .span12 {
width: 99.99999999%;
*width: 99.946808500638%;
}
.row-fluid .span11 {
width: 91.489361693%;
*width: 91.436170203638%;
}
.row-fluid .span10 {
width: 82.978723396%;
*width: 82.925531906638%;
}
.row-fluid .span9 {
width: 74.468085099%;
*width: 74.414893609638%;
}
.row-fluid .span8 {
width: 65.957446802%;
*width: 65.904255312638%;
}
.row-fluid .span7 {
width: 57.446808505%;
*width: 57.393617015638%;
}
.row-fluid .span6 {
width: 48.936170208%;
*width: 48.882978718638%;
}
.row-fluid .span5 {
width: 40.425531911%;
*width: 40.372340421638%;
}
.row-fluid .span4 {
width: 31.914893614%;
*width: 31.861702124638%;
}
.row-fluid .span3 {
width: 23.404255317%;
*width: 23.351063827638%;
}
.row-fluid .span2 {
width: 14.89361702%;
*width: 14.840425530638%;
}
.row-fluid .span1 {
width: 6.382978723%;
*width: 6.3297872336383%;
}
.row-fluid .offset12 {
margin-left: 104.255319138%;
*margin-left: 104.14893615928%;
}
.row-fluid .offset12:first-child {
margin-left: 102.127659564%;
*margin-left: 102.02127658528%;
}
.row-fluid .offset11 {
margin-left: 95.744680841%;
*margin-left: 95.638297862277%;
}
.row-fluid .offset11:first-child {
margin-left: 93.617021267%;
*margin-left: 93.510638288277%;
}
.row-fluid .offset10 {
margin-left: 87.234042544%;
*margin-left: 87.127659565277%;
}
.row-fluid .offset10:first-child {
margin-left: 85.10638297%;
*margin-left: 84.999999991277%;
}
.row-fluid .offset9 {
margin-left: 78.723404247%;
*margin-left: 78.617021268277%;
}
.row-fluid .offset9:first-child {
margin-left: 76.595744673%;
*margin-left: 76.489361694277%;
}
.row-fluid .offset8 {
margin-left: 70.21276595%;
*margin-left: 70.106382971277%;
}
.row-fluid .offset8:first-child {
margin-left: 68.085106376%;
*margin-left: 67.978723397277%;
}
.row-fluid .offset7 {
margin-left: 61.702127653%;
*margin-left: 61.595744674277%;
}
.row-fluid .offset7:first-child {
margin-left: 59.574468079%;
*margin-left: 59.468085100277%;
}
.row-fluid .offset6 {
margin-left: 53.191489356%;
*margin-left: 53.085106377277%;
}
.row-fluid .offset6:first-child {
margin-left: 51.063829782%;
*margin-left: 50.957446803277%;
}
.row-fluid .offset5 {
margin-left: 44.680851059%;
*margin-left: 44.574468080277%;
}
.row-fluid .offset5:first-child {
margin-left: 42.553191485%;
*margin-left: 42.446808506277%;
}
.row-fluid .offset4 {
margin-left: 36.170212762%;
*margin-left: 36.063829783277%;
}
.row-fluid .offset4:first-child {
margin-left: 34.042553188%;
*margin-left: 33.936170209277%;
}
.row-fluid .offset3 {
margin-left: 27.659574465%;
*margin-left: 27.553191486277%;
}
.row-fluid .offset3:first-child {
margin-left: 25.531914891%;
*margin-left: 25.425531912277%;
}
.row-fluid .offset2 {
margin-left: 19.148936168%;
*margin-left: 19.042553189277%;
}
.row-fluid .offset2:first-child {
margin-left: 17.021276594%;
*margin-left: 16.914893615277%;
}
.row-fluid .offset1 {
margin-left: 10.638297871%;
*margin-left: 10.531914892277%;
}
.row-fluid .offset1:first-child {
margin-left: 8.510638297%;
*margin-left: 8.4042553182766%;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 20px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 710px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 648px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 586px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 524px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 462px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 400px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 338px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 276px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 214px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 152px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 90px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 28px;
}
}
@media (min-width: 1200px) {
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
.span8 {
width: 620px;
}
.span7 {
width: 540px;
}
.span6 {
width: 460px;
}
.span5 {
width: 380px;
}
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
.offset12 {
margin-left: 980px;
}
.offset11 {
margin-left: 900px;
}
.offset10 {
margin-left: 820px;
}
.offset9 {
margin-left: 740px;
}
.offset8 {
margin-left: 660px;
}
.offset7 {
margin-left: 580px;
}
.offset6 {
margin-left: 500px;
}
.offset5 {
margin-left: 420px;
}
.offset4 {
margin-left: 340px;
}
.offset3 {
margin-left: 260px;
}
.offset2 {
margin-left: 180px;
}
.offset1 {
margin-left: 100px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-left: 2.127659574%;
*margin-left: 2.0744680846383%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574%;
}
.row-fluid .span12 {
width: 99.99999999%;
*width: 99.946808500638%;
}
.row-fluid .span11 {
width: 91.489361693%;
*width: 91.436170203638%;
}
.row-fluid .span10 {
width: 82.978723396%;
*width: 82.925531906638%;
}
.row-fluid .span9 {
width: 74.468085099%;
*width: 74.414893609638%;
}
.row-fluid .span8 {
width: 65.957446802%;
*width: 65.904255312638%;
}
.row-fluid .span7 {
width: 57.446808505%;
*width: 57.393617015638%;
}
.row-fluid .span6 {
width: 48.936170208%;
*width: 48.882978718638%;
}
.row-fluid .span5 {
width: 40.425531911%;
*width: 40.372340421638%;
}
.row-fluid .span4 {
width: 31.914893614%;
*width: 31.861702124638%;
}
.row-fluid .span3 {
width: 23.404255317%;
*width: 23.351063827638%;
}
.row-fluid .span2 {
width: 14.89361702%;
*width: 14.840425530638%;
}
.row-fluid .span1 {
width: 6.382978723%;
*width: 6.3297872336383%;
}
.row-fluid .offset12 {
margin-left: 104.255319138%;
*margin-left: 104.14893615928%;
}
.row-fluid .offset12:first-child {
margin-left: 102.127659564%;
*margin-left: 102.02127658528%;
}
.row-fluid .offset11 {
margin-left: 95.744680841%;
*margin-left: 95.638297862277%;
}
.row-fluid .offset11:first-child {
margin-left: 93.617021267%;
*margin-left: 93.510638288277%;
}
.row-fluid .offset10 {
margin-left: 87.234042544%;
*margin-left: 87.127659565277%;
}
.row-fluid .offset10:first-child {
margin-left: 85.10638297%;
*margin-left: 84.999999991277%;
}
.row-fluid .offset9 {
margin-left: 78.723404247%;
*margin-left: 78.617021268277%;
}
.row-fluid .offset9:first-child {
margin-left: 76.595744673%;
*margin-left: 76.489361694277%;
}
.row-fluid .offset8 {
margin-left: 70.21276595%;
*margin-left: 70.106382971277%;
}
.row-fluid .offset8:first-child {
margin-left: 68.085106376%;
*margin-left: 67.978723397277%;
}
.row-fluid .offset7 {
margin-left: 61.702127653%;
*margin-left: 61.595744674277%;
}
.row-fluid .offset7:first-child {
margin-left: 59.574468079%;
*margin-left: 59.468085100277%;
}
.row-fluid .offset6 {
margin-left: 53.191489356%;
*margin-left: 53.085106377277%;
}
.row-fluid .offset6:first-child {
margin-left: 51.063829782%;
*margin-left: 50.957446803277%;
}
.row-fluid .offset5 {
margin-left: 44.680851059%;
*margin-left: 44.574468080277%;
}
.row-fluid .offset5:first-child {
margin-left: 42.553191485%;
*margin-left: 42.446808506277%;
}
.row-fluid .offset4 {
margin-left: 36.170212762%;
*margin-left: 36.063829783277%;
}
.row-fluid .offset4:first-child {
margin-left: 34.042553188%;
*margin-left: 33.936170209277%;
}
.row-fluid .offset3 {
margin-left: 27.659574465%;
*margin-left: 27.553191486277%;
}
.row-fluid .offset3:first-child {
margin-left: 25.531914891%;
*margin-left: 25.425531912277%;
}
.row-fluid .offset2 {
margin-left: 19.148936168%;
*margin-left: 19.042553189277%;
}
.row-fluid .offset2:first-child {
margin-left: 17.021276594%;
*margin-left: 16.914893615277%;
}
.row-fluid .offset1 {
margin-left: 10.638297871%;
*margin-left: 10.531914892277%;
}
.row-fluid .offset1:first-child {
margin-left: 8.510638297%;
*margin-left: 8.4042553182766%;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 20px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 926px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 846px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 766px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 686px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 606px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 526px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 446px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 366px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 286px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 206px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 126px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 46px;
}
.thumbnails {
margin-left: -20px;
}
.thumbnails > li {
margin-left: 20px;
}
.row-fluid .thumbnails {
margin-left: 0;
}
}
@media (max-width: 979px) {
body {
padding-top: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 18px;
}
.navbar-fixed-bottom {
margin-top: 18px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
padding-left: 10px;
padding-right: 10px;
margin: 0 0 0 -5px;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 9px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #555;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: #555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .nav > li > a:focus,
.nav-collapse .dropdown-menu a:hover,
.nav-collapse .dropdown-menu a:focus {
background-color: #f2f2f2;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: #999;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .nav > li > a:focus,
.navbar-inverse .nav-collapse .dropdown-menu a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:focus {
background-color: #111111;
}
.nav-collapse.in .btn-group {
margin-top: 5px;
padding: 0;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
float: none;
display: none;
max-width: none;
margin: 0 15px;
padding: 0;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu:before,
.nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 9px 15px;
margin: 9px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: #111111;
border-bottom-color: #111111;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
overflow: hidden;
height: 0;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
Now, you might not need/want all of it, but at least the parts relative to the span4, span6, span8, etc.
The best would be to contact your template provider for more precise help on that boostrap CSS of their template.
Please Log in or Create an account to join the conversation.
Time to create page: 0.187 seconds