I am creating a responsive layout in Boot Strap 3.
I am not able to fix the collapsible search bar. Please click on below link to view the how collapsible menu should look.
Expanded Menu Link
Collapsible Menu Link
Please advise.
Thank you
You should change your code a little bit to make it work on mobile device.
Change this
<a href="#"><img src="images/iconCart.png" width="14" height="13">
Cart <span class="badge">2</span></a>
To this
<a href="#">
<span class="show-mobile"><img src="images/iconCart.png" width="14" height="13"> </span>
<span class="hidden-mobile">Cart</span>
<span class="badge hidden-mobile">2</span>
</a>
And add media Query CSS like
#media screen and (max-width: 768px) {
.show-mobile {
display:inline-block;
}
.hidden-mobile {
display:none;
}
}
Related
I am using the "Nearby Image Partial Visible" slider in my jspx page. The slider works fine except for one issue. The right arrow for navigation does not appear. ALthough my source code is correct, when I run the page the structure is changed. By looking at the HTML DOM of the page, I figured that is because the of the right arrow is nested inside element of the left arrow.
My source code for the arrows is the following-
<span u="arrowleft" class="jssora13l" style="top: 123px; left: 30px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora13r" style="top: 123px; right: 30px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
But in the browser the HTML is as follows:
<span u="arrowleft" class="jssora13l" style="top: 123px; left: 30px;">
<!-- Arrow Right -->
<span u="arrowright" class="jssora13r" style="top: 123px; right: 30px;">
</span>
</span>
I cant figure out the issue. Please help.
I have made a sidenav and its collapse button is in the navbar using the materialize framework. The collapse-button starts disappering if the screen resolution is more than 993px. This is the code
<div class="nav-wrapper">
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
<img src="Logo.png" width="120">
<ul id="nav-mobile" class="right">
<li>
<img src="work/marker-5.png">Bangkok
</li>
</ul>
</div>
</nav>
My script is this
$(".button-collapse").sideNav({
menuWidth: 350,
closeOnClick: true
});
Is this due to any media query in the materialize framework?
If you remove the button-collapse class then the menu will remain visible on wider screens.
That it's because the materialize only use this button for phones and tablets. If you want to use it for large devise you need to add the following class to your menu item like they said in their documentation
Fullscreen HTML Structure
If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .button-collapse
When you do it, the code will remain in this way.
<i class="mdi-navigation-menu show-on-large"></i>
also i actually change the class from "mdi-navigation-menu" to "material-icons" and use the menu icon. In this case the code is going to look like this:
<i class="material-icons show-on-large">menu</i>
This is the link of the Materialize Documentation
Hope this help you! :) In my personal opinion materializeCSS need more specific documentation for certain things.
In you materialize.css file , change the following code,
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: none;
}
}
To
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: block;
}
}
We are using Bootstrap 2 on a Joomla 3.2.2 site. See: http://test.stuntlist.com/west
The first slide works perfectly, but when the second slide comes in, it disappears. You can see it start to transition between the slides, but then the area where the slide should be just disappears and the content is moved up into the slide area.
I don't see any JS errors on the site. We have used the same carousel code on other sites without this issue.
Here is the carousel code:
<div class="slideshow">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="/component/joomgallery/action-photos?Itemid=88"><span data-picture data-alt="">
<span data-src="/images/hero/slide01.jpg"></span>
<span data-src="/images/hero/portrait/slide01mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide01.jpg" alt=""></noscript>
</span></a>
<div class="carousel-caption">
<div class="container">
<h4>Slide Caption Goes Here.</h4>
</div>
</div>
</div>
<div class="item">
<span data-picture data-alt="">
<span data-src="/images/hero/slide02.jpg"></span>
<span data-src="/images/hero/portrait/slide02mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide02.jpg" alt=""></noscript>
</span>
<div class="carousel-caption">
<div class="container">
<h4>Second Caption.</h4>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
Any idea what could be causing the problem?
Thank you.
This is caused due to a conflict with Mootools, download the following plugin and apply your preferences and it'll resolve this problem:
https://extensions.joomla.org/extension/mootools-enabler-disabler
The problem is Joomla adds another DIV (We will call it JDIV) outside the Carousel container, when second/EVEN Numbered Slides are viewed some script sets the height of the JDIV equal to "0px", see my code below
<div class="col-sm-12 pharma">
<!-- this is the div which joomla is adding (JDIV) -->
<div style="margin: 0px; position: relative; overflow: hidden; height: 0px;">
<!-- this is the div which joomla is adding (JDIV) -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: -203px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
....
</div>
<div class="ind-div">
<ol class="carousel-indicators">
....
</ol>
</div>
</div>
</div>
</div>
The Solution
This solution worked for me and should also work for you too.
Add a CSS class named "#myCarousel" ( ID of the carousel) and sets its margin to 0px with important,
#myCarousel{ margin:0px !important; }
Secondly add another CSS class like
.pharma>div{ height:204px !important; }
where .pharma is the class which I have used on the DIV which is outside the JDIV. The height will be different from what I have used and might have to use media queries if using responsive.
To find the height simply inspect the element and note the height of the first slide and use that height in CSS class.
I do not have a fix for you but I was able to find a few issues. The first and biggest issue being that you have inline styling that is causing the image to "disappear". The image is really just moved 572px upwards and is off the screen. Notice the two images below. The first link is the image that does work. The second link is the image that does not display.
http://tinypic.com/r/hthi4y/8
http://tinypic.com/r/2hoix35/8
Using chrome, I opened the developer console and manually changed the margin to 0px instead of -572px and it fixed the issue. I would take a look at your JS again and see what values are being applied to each image because the entire display is being rendered dynamically, I assume for mobile devices.
I have a simple logout button in my navbar and I would like the word "Logout" and the icon from font-awesome to display inline. I thought <span> was an inline tag, but it is causing a line break. I need the span in order to hide the extra text on small screens.
<a href="/logout/" type="button" class="btn btn-default navbar-btn pull-right">
<span class="hidden-xs">Logout</span><i class="fa fa-sign-out fa-lg"></i>
</a>
You can see the problem here: http://bootply.com/94625
try to add:
#media(min-width:768px)
{
.hidden-xs{display:inline !important}
}
the .hidden-xs sets the display of your span to block
It's because you need to download font-awesome and have it in your root directory also point it in your head section. That's because it doesn't show on your live link.
Hope this helps.
I would like to have more than one button on the right side of the Header bar. The docs say you can customize using a DIV, but when I do that the buttons do not have their normal style. Any advice?
The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this:
<div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
//have your button here
</div>
Hope this helps.
This is how I did it, seems clean.
HTML
<div id="myHeader" data-role="header" data-theme="a">
<span class="ui-title"></span>
<div class="ui-btn-right">
<a id="myButton1" class="headerButton" href="#" data-role="button"></a>
<a id="myButton2" class="headerButton" href="#" data-role="button"></a>
</div>
</div>
CSS
.headerButton {
float: left;
margin-right: 5px!important;
}
I've seen this done in the footer (Shown Here), might give you an idea for the header or toolbar
You can use the grid class.
<div class="ui-grid-a ui-btn-right">
<div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
<div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>
<a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left
ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel"
data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Cancel</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>