I'm trying to get the last two navigation buttons ("Education" and "Contact") to move the social media icons to the left, and then stay there.
http://comms101.co.za/populus/index.php#
For some reason immediately when clicked, it momentarily displays correctly BUT then the social media icons revert back. If you click the button again, then it displays correctly (how it should display).
The navigation is a php include. Here is the code:
<div class="row">
<div class="col-lg-5 col-md-5">
<div class="logo"><img src="imgs/logo.png" alt="logo"></div>
</div>
<div class="col-lg-7 col-md-7 mn">
<div class="follow current1" style=""> <img src="imgs/f.png" alt=""> <img src="imgs/int.png" alt=""> <img src="imgs/in.png" alt=""> </div>
<div id="menu-icon">
<div class="menu-icn"><span></span><span></span><span></span></div>
</div>
<div class="menu" id="menu">
<ul id="links">
<li class="link">HOME</li>
<li class="link">ABOUT</li>
<li class="link">RESOURCES</li>
<li class="link">TRAINING</li>
<li class="link">COACHING</li>
<li class="folow current1 current">EDUCATION</li>
<li class="folow1 current2 link">CONTACT</li>
</ul>
</div>
</div>
you are adding an extra class to move social icons to left that one link2
"follow current1 link2".
so when you click then jquery add this class but on same time page refresh then "link2" class gone.
so what you need is to set the condition through php,
if the page is contact us then add class "link2" into this div.
<div class="follow current1 link2">
<img src="imgs/f.png" alt="">
<img src="imgs/int.png" alt="">
<img src="imgs/in.png" alt="">
</div>
The .link1 class has to be here when you load education page for example.
A way to do this is to test the active current page and to add class with a PHP condition in the menu.
It displays momently good because of surely a JS script you made on click of the link and then it loads the page.
Related
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I am using bootstrap 3.2.0. I have some content in the tabs and I want to create an anchor link to this content in the tabs to different websites. Here is my code:
<div class="bs-docs-example">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li> Sample#1 </h1></li>
<li> Sample#2 </h1></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1A">
<li id="ndf_35"></li>
</div>
<div class="tab-pane" id="2A">
<li id="ndf_36"></li>
</div>
</div>
</div>
</div>
I create the link like this :
some text
But it's not working. Does anyone have an idea how to fix this?
Demo
Its working fine.
Check that
You have included jquery (you need jquery for bootstrap.js)
You have included bootstrap.js
open <h1> tags
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
Hi so I'm working on a site with an image gallery and I decided to use a Codeigniter and a library called Image CRUD for some of the backend stuff, and Twitter Bootstrap for the front end. Its pretty basic stuff. The problem is Image CRUD generates a lot of its own code for the front end so I'm having trouble getting it to look the way I want. Im trying to make a responsive gallery that resizes and stays centered on a bunch of different devices. This should be a piece of cake with bootstrap, but for some reason it just won't work. Any help would be greatly appreciated!
Heres the code for the images that Image CRUD outputs:
<ul class='photos-crud'>
<li id="photos_206">
<div class='photo-box'>
<img src='link_to_thumb__b551b-6.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_203">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_204">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_205">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_202">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_201">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
</ul>
The issue may be with your image width/height having exact dimensions. If you can get rid of that and let bootstrap take over, that'd be great. Responsive images are usually 100% of the parent width and that parent having a percentage of something else. Maybe you can use SASS to #extend bootstrap styles into the generated elements so..
.photos-crud { #extend .row }
.photos-crud > li { #extend .col-md-3}
Something like that will setup the grid for laying out the images, then if you can remove the auto-generated dimensions, great, but if not maybe use !important to override the dimensions like..
.photos-crud > li img {width:100% !important; height:auto !important;}
I have a Google Chart that displays fine in its own page /graph/map_freq but is sized down when I display it as a tab content.
Here's the tabbable code:
<div class="tab-pane" id="map_freq">
<%= render "graph/map_freq" %>
</div>
Here's the code in graph/map_freq.html.erb:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I am pretty sure this is related to tabbable component of Bootstrap.
You shall mark it up like so...
<ul class="nav nav-tabs" id="map_freq">
<li class="active"><a data-toggle="tab" href="#featured-members">Your Tab Name</a></li>
</ul>
<div class="tab-content" id="yourId">
<div id="map_freq" class="tab-pane active fade in">
Your Content Here.
</div>
</div>
The code shall output a page similar to THIS ONE.