I want my facebook icon to aligned in center(horizontally not vertically, so that it comes between my collapse button and twitter icon). I tried text-align but it isn't working..! Any other way I can do it ?
My relevant HTML code
<button type="button" style="float:left;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<ul>
<li class="horiz1">
<img src="img/facebook.png" style="width:28px;" >
</li>
<li class="horiz">
<img src="img/twitter.png" style="width:35px;" >
</li>
</ul>
My relevant CSS code
.horiz { display: inline; float: right;}
.horiz1 { display: inline;}
I tried text-align but it isn't working..
Where did you tried?
Apply that property to ul tag, like...
ul {
text-align: center;
}
http://jsfiddle.net/gmolop/ovwnw90u/
use margin-top to make it come down a little.
Edited: Try using this :
.horiz
{
margin:0 auto;
display:inline;
float:right;
}
Set the Heights of the images equal to get them centered.
Related
What to do to change navbar-toggle button behaviour when the button is being clicked and after?
It gets some blue border color.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</div>
</div>
</nav>
It might be this, bootstrap has some automatic styling for .navbar-toggle. You can add something like below to counteract it's default styling.
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
border:none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 0;
}
.navbar button {
outline: none !important;
}
This did the trick for me.
I am not quite sure how your button is being displayed when it has a class="navbar-toggle" but I think what you need is something like :
$('button.navbar-toggle').on('click', function () {
$(this).css('border', '1px solid blue');
});
If you wish to not use jQuery, you can do :
document.querySelector('button.navbar-toggle').addEventListener('click', function (e) {
e.target.style.border = '1px solid blue';
});
try css:
[your-btn] {out-line: none;}
I know this seems silly, but this menu is driving me nutty. I've fixed it a few times, but it keeps coming back and biting me in the butt.
The menu looks like this. And as you can see half of it is cut off so you cannot read the words.
I have tried many ways to fix this. I have moved the menu around in the html, tried positioning it and adding a z-index. But I have had no luck.
The html looks like this
<div class="pull-right" style="padding-top: 0px;">
<!-- drop button -->
<div class="btn-group js_editTab-wrapper open" data-bind="attr: { 'data-id' : id, 'data-type' : entityType}" data-id="25402" data-type="KioskPageControl">
<!-- ko if : $data.editTabs -->
<button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropBorder" role="menu" data-bind="foreach: $data.editTabs">
<li>Appearance</li>
<li>Identification</li>
<li>Parameters</li>
<li>Rules</li>
</ul>
<!-- /ko -->
</div>
<span class="drag btn-xs btn-labeled btn-info">
<span class="btn-label"><span class="glyphicon glyphicon-move"></span></span>
</span>
<span class="remove btn-xs btn-labeled btn-danger">
<span class="btn-label"><span class="glyphicon glyphicon-remove"></span></span>
</span>
</div>
and the css for the menu looks like this
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
overflow: visible;
Obviously the display none turns to block when clicked on the dropdown menu and the blue bar does have a z-index on it of 1. Any help would be appreciated!
I am using "bootstrap": "~3.3.4" inside the mean.js framework. The navbar dropdown menu does not have any problem opening and staying put when the dropdown icon is clicked on desktop. But after getting pushed to the staging server, clicking the icon on the iphone and samsung galaxy browsers no longer opens the dropdown menu or it sometimes opens it but it does not stay opened.
Here is the code:
<div class="landing-page-header">
<div class="navbar-header" >
<button class="navbar-toggle mytoggle" type="button" data-ng-click="toggleCollapsibleMenu()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a data-ui-sref="home" class="navbar-brand">
<img class="header-logo" ng-src="modules/core/img/home/myimg.png" height="">
</a>
</div>
<nav class="collapse navbar-collapse" data-ng-show="!authentication.user" collapse="!isCollapsed" role="navigation">
<ul class="nav navbar-nav navbar-right landing-page-nav" data-ng-hide="authentication.user">
<li class="text-center" data-ng-repeat="item in menu.items | orderBy: 'position'"
data-ng-if="item.roles.indexOf('guest') !== -1"
ng-switch="item.type"
data-ng-class="{active: $state.includes(item.state)}"
class="{{item.class}}"
target="{{item.target}}"
dropdown="item.type === 'dropdown'">
<a ng-switch-when="dropdown" class="dropdown-toggle">
<span data-ng-bind="item.title"></span>
<b class="caret"></b>
</a>
<ul ng-switch-when="dropdown" class="dropdown-menu">
<li data-ng-repeat="subitem in item.items | orderBy: 'position'" data-ng-if="subitem.shouldRender(authentication.user);" data-ui-sref-active="active">
<a data-ui-sref="{{subitem.state}}" data-ng-bind="subitem.title"></a>
</li>
</ul>
<a ng-switch-default data-ui-sref="{{item.state}}" data-ng-bind="item.title"></a>
</li>
<li class="divider-vertical"></li>
<li class="text-center " data-ui-sref-active="active">
<a data-ui-sref="authentication.signin" target="_self">SIGN IN</a>
</li>
</ul>
</nav>
</div>
And Here is the CSS:
.landing-page-header {
position: fixed;
left: 0px;
top: 0px;
opacity: 0.9;
background: #111;
width:100%;
height: 5em;
z-index: 99;
margin-bottom: 10em;
}
.navbar-brand img {
/*background: #fff;*/
}
.landing-page-header ul {
background: #111;
margin-right:0.5em;
}
I had looked at other answers on this site and googled the issue. One answer I came across suggested to use a or input instead of button, but I still faced the same issue.
What is happening in the browser is that, on button click (hamburger) (on galaxy and iphone) immediately after the code is pushed to the staging server the navbar renders, but once a menu item is clicked, when you go back and click on the hamburger menu again, the navbar will behave weird starting to render and stopping and going back immediately.
Anyone has any idea?
I have found a solution for it myself. I just had to set the position of the drop down to "static" for screens less than 480px.
#media (max-width: 480px) {
.landing-page-header ul{
position: static;
width:100%;
}
}
I'm new in rails, so far I'm stuck trying to change the color of the navbar.
I have read almost everything about the subject and I haven't seen anything like my case.
As you can see in the pictures, the navbar changed to the color I wanted but for some reason the corners are still in black and also the background of my dropdown menu still in black.
Well I cannot upload pictures because I'm new here.
The github repository is at https://github.com/nanurbina/janus.git
I hope someone can give me a hand.
Here is my code on _navigation.html.erb
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'Janus BPO', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
</div>
and the code on the css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
.navbar-brand {
font-size: inherit;
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-collapse
{
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-inverse .container {
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
Thanks!
Replace navbar-inverse with myNavbar on your html and add the following to your CSS:
.myNavbar {
background-color: #ccc;
color:#222;
border: 1px solid #333;
}
Just change the color codes to what you want and you're good to go.
I using bootstrap to do a small project, I'm trying to do a dropdown and using a arrow to show that there is something under, but im having problem trying to align the text left and the arrow right.
it is possible to align the text left and the image right
this is how it looks now
Busines > |
|
|
Is there a way to make it look like this:
Busines > |
|
|
code:
<a href="#Business" class="expander">Business <span
class="glyphicon glyphicon-chevron-right pull-right"
style="float:right; margin-right:3px; font-size:0.7em; "></span></a>
Part of the menu code:
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Left Navigation</span>
</div>
<div class="navbar-collapse sidebar-navbar-collapse collapse">
<nav id="leftNav" role="navigation">
<ul class="leftnavigation">
<li>
Business <span class="glyphicon glyphicon-chevron-right pull-right"> </span>
<ul id="Business">
<li>Administrative </li> .........
What display property are your anchors set to? Try setting the a.expander to display: inline-block, and give it a width. That should float your chevron glyph to the right.
Also, no need to inline-style it with float: right, as that's what bootstrap pull-right does. (redundant CSS).
Hope that helps!
If you want align right arrow inside element than this element has to be width enough.
If element display style is inline (default for a tag) you cannot align anything inside.
E.g. if you will add display: block to your a tag or display: inline-block; width: 100%
Othervise your a will not take full width of parent element
<a href="#Business" class="expander" style="display: inline-block; width: 100%">Business
<span class="glyphicon glyphicon-chevron-right pull-right" style="float:right; margin-right:3px; font-size:0.7em; "></span>
</a>