I am trying to get top-bar nav menu that contains an 280 x 70 image on the left bottom align the menu choices on the right. I can right and left align text in Foundation but I can't find a way to vertical align.
Example Fiddle
<div class="row full-width">
<div class="large-4 columns">
<img src="MyLogo.png" width="280" height="70" alt="My 280 x 70 Logo" />
</div>
<div class="large-8 columns">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
</div>
</li>
<li class="toggle-topbar menu-icon"> <span></span>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"> <a href="/home/index" class="menuMix">
<span class="menuMinor">Home Page</span>
<span class="menuMain allCaps">Home</span>
</a>
</li>
<li class=""> <a href="/home/about" class="menuMix">
<span class="menuMinor">Who We Are</span>
<span class="menuMain allCaps">About</span>
</a>
</li>
<li class=""> <a href="/home/contact" class="menuMix">
<span class="menuMinor">Get In Touch</span>
<span class="menuMain allCaps">Contact</span>
</a>
</li>
</ul>
</section>
</nav>
</div>
The easiest way is to use flexbox.
.top-bar {
display: flex;
justify-content: flex-end;
align-items: center;
}
Related
I am a beginner and use Bulma CSS and try to make a side menu by default CSS. Everything seems to be simple, but my content in the column is cut and has the wrong width.
`
<div class="columns is-fullheight" style="background-color: lightgrey;">
<aside class="column is-2 section is-narrow-mobile is-hidden-mobile is-fullheight" style="background-color: lightblue;">
<div class="menu">
<p class="menu-label is-hidden-touch">Navigation</p>
<ul class="menu-list">
<li>
<a href="#" class="">
<span class="icon"><i class="fa fa-home"></i></span> Home
</a>
</li>
<li>
<a href="#" class="is-active">
<span class="icon"><i class="fa fa-table"></i></span> Links
</a>
<ul>
<li>
<a href="#">
<span class="icon is-small"><i class="fa fa-link"></i></span> Link1
</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
</div>
`
Result
If I remove class "columns" I did size what I want
So, what I do incorrect?
I'm trying to get the pricing table on this page centered: http://CloseDeals.co/sponsored
I'm using bootstrap so maybe there's a way to move the columns in?
It's currently justified to the left, but I want it centered.
Here's the code:
<section id="pricing" class="pricing">
<div class="container">
<div class="row m-b-lg">
<div class="col-lg-12 text-center">
<div class="navy-line"></div>
<h1><span class="navy"><strong>Get 50% Off Through This Sponsored Link!</strong></span></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 wow zoomIn">
<ul class="pricing-plan list-unstyled">
<li class="pricing-title">
Monthly
</li>
<li class="pricing-desc">
21-day FREE Trial
</li>
<li class="pricing-price">
<s>$40</s> <span>$20</span>
</li>
<li>
Unlimited Sequences
</li>
<li>
Unlimited Active Contacts
</li>
<li>
Un-Sponsored Emails
</li>
<li>
Email & Chat Support
</li>
<li>
Import Contacts
</li>
<li>
API & Zapier Access
</li>
</ul>
</div>
<div class="col-lg-4 wow zoomIn">
<ul class="pricing-plan list-unstyled selected">
<li class="pricing-title">
Annual
</li>
<li class="pricing-desc">
21-day FREE Trial
</li>
<li class="pricing-price">
<s>$400</s> <span>$200</span>
</li>
<li>
Unlimited Sequences
</li>
<li>
Unlimited Active Contacts
</li>
<li>
Un-Sponsored Emails
</li>
<li>
Email & Chat Support
</li>
<li>
Import Contacts
</li>
<li>
API & Zapier Access
</li>
<li>
<strong>2 Months FREE!</strong>
</li>
</ul>
</div>
</div>
<div class="row m-t-lg">
<div class="col-lg-8 col-lg-offset-2 text-center m-t-lg">
<a class="btn btn-primary btn-xs" href="http://app.closedeals.co/users/sign_up/fbs">Start Your 21-Day FREE Trial</a>
</div>
</div>
</div>
</div>
</section>
I tried adding:
<div class="container" align="center">
the page have bootstrap so you can use an offset class, i tried in the inspector an offset of 2 and seem nice
<div class="col-lg-4 col-lg-offset-2 wow zoomIn animated" style="visibility: visible; animation-name: zoomIn;">
you can try another values if you wish:
col-lg-offset-2
here is more info:
bootstrap grid offseting
you can do it with flexbox you put this code to the parent of the two boxes
YOUR CONTAINER{
display: flex;
justify-content: center;
}
Do you want to offset the first pricing table?
You could add an offset to the first item.
<div class="col-lg-4 col-lg-offset-2 wow zoomIn animated">
I have a Foundation 5 based site with a nav bar at the top.
Because my menu choices are larger text they overlap the left "Name" section when the screen is made narrower.
Is there a way to control when the nav menu slips into mobile style?
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
<a href="#">
<img src="mylogo.png"/>
</a>
</div>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span></span>
</a>
</li>
</ul>
<section class="top-bar-section hide-for-medium-down ">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
<a href="/home/index" class="menuMix">
#*<span class="menuMinor">Home Page</span>*#
<span class="menuMain allCaps">Home</span>
</a>
</li>
<li class="">
<a href="/home/about" class="menuMix">
#*<span class="menuMinor">Who We Are</span>*#
<span class="menuMain allCaps">About</span>
</a>
</li>
<li class="">
<a href="/home/contact" class="menuMix">
#*<span class="menuMinor">Get In Touch</span>*#
<span class="menuMain allCaps">Contact</span>
</a>
</li>
</ul>
</section>
</nav>
If you use SCSS you can try to decrease
$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);
I am using Bootstrap v3 for a layout and have added a dropdown to the navbar but when I add btn-primary the text is black so cannot be seen, if I remove the btn-primary then the corner radius seems to overlap the menu.
Any help is appreciated.
<div class="container">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="Javascript:void(0);">Title Information </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown btn-primary">
<a class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
Action 1
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li class="divider"></li>
<li>
Close
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div role="tabpanel" class="col-md-12 column">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
some images:
https://www.dropbox.com/s/fuirgtcfc0obl04/Image1.JPG?dl=0
https://www.dropbox.com/s/en0vooc1z99hbkh/Image2.JPG?dl=0
Take out the "btn-primary" but change it to "btn" only, that should fix it.
Remove both btn-primary classes, as these aren't required.
You also have </div> and </nav> closing in the wrong order, and two extra </div> at the bottom of your code.
With the btn-primary removed, and the above fixed, then you get the following:
https://jsfiddle.net/9jym0k8r/
You can customize the style of bootstrap button.
I just added this to change the color of text :
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
Link Demo : http://www.bootply.com/Ukp9KCUuFP
You can also give an "unique id" then customize the style for this button.
<a id="test" class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
css:
#test {
color:white;
}
#test:hover{
color:black;
}
Link : http://www.bootply.com/XWF4x6uhmz
Why span5 not going to the right position? Span5 is go to under Span6.I'm linked to bootstrap
My code:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
Use display: inline-block.
.span6, .span5 {
display: inline-block;
vertical-align: top;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="http://dummyimage.com/40/" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
From your snippet, it's hard to advise you're best option. Although one 'simple' styling would be to add float:right to your css like so:
.span5{
float:right;
}
The Demo below shows this in action:
.span5{
float:right;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
you could also use the display options, like below (aligning logo next to links):
div{
display:inline-block;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>