Hope somebody can see what's going on with this, it's got me beat.
I have an issue with the tag text elements inside a drop-down menu extending beyond the li element for the mobile version of the navigation in the footer. The li element has a width restriction (is shaded orange to see clearly), you can see the problem on this page when browser is mobile width wide https://www.mcveaghfleming.co.nz/nav-issues.html There are some long link names and instead of flowing under the line above they are extending past the end of the li element.
Here's the relevent html
<div class="footer">
<div class="blockfooter">
<div class="row ft-low-nav ">
<style>
.foot-mobile-on .dropdown-menu li{float:left; width:100%; background:orange; word-wrap: break-word !important;}
.foot-mobile-on .dropdown-menu li,
.foot-mobile-on .dropdown-menu li a{display:inline-block;}
</style>
<span class="foot-mobile-on">
<div class="col-md-12">
<div id="navbar" class="navbar-collapse collapse dropdown">
<ul class="nav navbar-nav" >
<li><a href="#" class="dropdown-toggle make-b" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Business & Corporate <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="make-b">Business & Corporate </li>
<li>Anti-Money Laundering and Countering Financing of Terrorism Act 2009 Compliance and Advice
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</span>
<!-- end-->
</div>
</div>
</div>
<!--end-->
Be sure to set position:relative or anything different than the static default to the UL.
Adding up, this is to prevent the 100% width to be referring to an upper parent. My guess is that a lack of position declaration on the parent is scaling up the DOM to the entire body width. A quick inspect on the code should give you a hint about this, but is hard without seeing the actual code in action.
Related
I'm trying to tweak an existing Twitter Bootstrap navigation bar to include a sign-out item, which is implemented as a form:
<div class='navbar'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><form >Sign Out</form></li>
</ul>
</div>
</div>
The logout link gets rendered differently than the rest of the navigation items. I'm sure this is a simple fix for someone knowledgeable in Twitter Bootstrap, but I'm pretty lost and would appreciate a push in the right direction.
I have a JSFiddle demonstrating the issue here.
The <form> tag is disrupting the bootstrap CSS if you inspect the bootstrap code you can see the selector for the a styles are only targeting direct descendants of the <li> in the nav
.navbar .nav > li > a
I am not sure the indended application of the form is but a real easy fix is to wrap the entire navbar with the form.
<form>
<div class='navbar'><div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li>Sign Out</li>
</ul>
</div>
</div>
</form>
Try This
<li>Sign Out</li>
remove the form tags
Check here JSFiddle
Here in the footer I have kept one image. But I could not adjust it's top and bottom margin.
Image should be in exactly middle of the footer. Which class reflect it?
CODEPEN DEMO: Demo
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img></li>
<li class="active">What is facebook?</li>
<li>How does it work?</li>
<li>Feedback</li>
<li>Contact us</li>
</ul>
</div><!--/.nav-collapse -->
I want to adjust share-shayri.jpg image in middle of the footer.
UPDATE
Note: in header also I have one image. I dont want changing the stlye into footer to be affected in header.
You could wrap the image inside a set of two divs:
<li>
<div id="wrapper">
<div align="center" id="wrapper-inner">
<a href="#" class="navbar-brand scroll-top">
<img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img>
</a>
</div>
</div>
</li>
And set the css:
#wrapper
{
display:table;
width:100%;
height:100%;
}
#wrapper-inner
{
display:table-cell;
width:100%;
height:100%;
vertical-align: middle;
}
This should center it both horizontal and verticaly
Your css is bit messed up to study...plus...reference link url are not answered, still :
Since, your image is inside a tag, its overflow:hidden set somewhere...identify it and then add this in your css
a.my_custom_a{
display:inline-block;
border:1px solid red;
vertical-align: middle; /*key*/
}
for markup
<a href="#" class="navbar-brand scroll-top my_custom_a">
<img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img>
</a>
this would solve your problem!
I integrated twitter bootstrap navbar into my asp.net project. However, I'm trying to align my bootstrap text into the center. Here is my source code for my navbar
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">iPolice</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li>Home</li>
<li class="divider-vertical"></li>
<li>Login</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is the image of my bootstrap
Then i added this twitterbootstrap css inside to attempt and shift the ipolice, home, contact and login into the center
#twitterbootstrap {
position:absolute;
text-align:center;
}
which didnt work. I visited this link and tried but still wasn't able to do it. May i ask how do i align my text into the center?
Depending on where you want the Brand link to appear, here are two possiblities
http://jsfiddle.net/panchroma/cW9sA/
or
http://jsfiddle.net/panchroma/GWMnF/
EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports
http://jsfiddle.net/panchroma/F5x5Z/
Note that in the second example I've added a copy of the brand link into the main menu, and used the utility classes of .hidden-desktop and .visible-desktop to fine tune how this is displayed at different viewports
Important CSS is
#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
#twitterbootstrap .navbar-inner {
text-align:center;
}
Some of this CSS is based on an answer from Andres Ilich
Good luck!
I have this problem with an aligning issue. I am building this responsive site using twitter bootstrap and my client wants me to align bottom some content from two different spans lik this:
He wants the grey box on the right in the right span4 to align bottom with the flexSlider on the left in the other span4. How can this be achieved? i cant use margin on the right side since the upper content is dynamic and can be much longer. i have tried using a relative positioned wrapper and absolutely positioned it but thet width of the grey box and everything gets all messed up when trying to resize the browser window to a smaller size..Any other way to go besides absolute positioning?
Here is the markup:
<div class="span8">
<div class="row section professionIntro">
<div class="span4">
<div class="flexslider section">
<ul class="slides">
<li>
<img src="img/slide1.png" alt="slide 1" />
</li>
<li>
<img src="img/slide2.png" alt="slide 2" />
</li>
<li>
<img src="img/slide3.png" alt="slide 3" />
</li>
</ul>
</div>
</div>
<div class="span4">
<p class="intro">Som dataingeniør jobber du med systemutvikling og drift av maskiner eller systemer.</p>
<ul class="infoExpand">
<li class="expandVideo">
<h2 class="videoSign">Video dataingeniøren hverdag</h2>
</li>
</ul>
</div>
</div>
Appreciate any help..
Add css responsive:
http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css
If is button position:absolute is converting position:static;
.videoSign {
position : static;
bottom:auto;
top:auto;
left:auto;
right:auto;
}
Example: http://jsfiddle.net/sEryj/
i need
at this moment code look
Css
ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}
* html ul#content li{display:inline;}
*+ html ul#content li{display:inline;}
Html
<ul id="content" >
<li>
<div style="height: 420px;width: 740px;" ></div>
</li>
<li>
<ul>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
</ul>
</li>
</ul>
Maybe css media queries are something you want to look in to:
http://css-tricks.com/6731-css-media-queries/
This specific tutorial explains how to make changes to the layout/styles based on screen width.
Basically it allows to conditionally set styles on elements, in this case you could make seperate styles for the ul depending on screen width. Browser support is pretty decent, and as a fallback you could supply some pretty simple js code to handle the not supporting browsers.
I'm guessing you need something like the following for it to look like the second image...
html:
<div id="content"></div>
<ul id="contentList">
<li>Text</li>
<li>Text</li>
...
</ul>
css:
#content {width:740px; height:420px}
#contentList {margin:10px 0; overflow:hidden}
#contentList li {min-width:220px; float:left; list-style:none}