I'm having a small problem with dropdown menu and mine controller, I have on my controller the variable for the dropdown content but it dont show on the webpage only those 3 dont work {$DEN}, {$DPT} and {$DES}
Here is the HMTL
<div class="top-nav">
<nav class="navbar navbar-default">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Menu
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<img src="{$favlogo}" alt="" width="8%" height="auto">
<li class="hvr-bounce-to-bottom active">{$homebar}</li>
<li class="hvr-bounce-to-bottom">{$aboutUs}</li>
<li class="hvr-bounce-to-bottom">{$servicos}</li>
<li class="hvr-bounce-to-bottom">{$galeria}</li>
<li class="hvr-bounce-to-bottom">{$equipa}</li>
<li class="hvr-bounce-to-bottom">{$contactUs}</li>
<li class="hvr-bounce-to-bottom">{$user}</li>
<li class="hvr-bounce-to-bottom">{$login}</li>
<li class="hvr-bounce-to-bottom">{$logout}</li>
<li class="hvr-bounce-to-bottom">{$email}</li>
<li class="hvr-bounce-to-bottom">{$contacto}</li>
<li class="dropdown">
Idioma
<div class="dropdown-content">
{$DEN}
{$DPT}
{$DES}
</div>
</li>
</ul>
<div class="clearfix"> </div>
</div>
</div>
</nav>
</div>
And here is the Controller code for this part
$data['DPT'] = 'Português';
$data['DEN'] = 'English';
$data['DES'] = 'Español';
//------------------ FOOTER ----------------------
$data['footercontactUS'] = 'Contacte-nos';
$data['footeraboutUS'] = 'Sobre Nós';
return $data;
The easier way is to use the full address to the href.
In your view
Português
Related
I have a navbar that does collapse as it should in mobile view but on the tablet (or ipad pro) there is a break or large padding/gap that breaks the navigation. The testing site is at:
padding or margin bottom occurs in tablet view
I have tried a number of things like adjusting the viewport and adding links to bootstraps transition.js and collapse.js files but that is not working either.
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12"> <a class="navbar-brand" href="http://patskailua.com/index.php"><img src="http://patskailua.com/images/kailua-beach-properties-llc.png" alt="pats kailua hawaiian Flower" usemap="#Map" class="img-responsive">
</a></div>
</div>
</div>
</div>
</div>
<div class="navbar-header">
<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> Menu
</button>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active goleft1">vacation rentals</li>
<li>kailua activities</li>
<li class="dropdown">
rentals by size<span class="caret black"></span>
<ul class="dropdown-menu">
<li><a href="http://patskailua.com/wp/three-bedrooms.php" >Three Bedrooms</a></li>
<li>Two Bedrooms</li>
<li>One Bedrooms</li>
<li>Studios</li>
</ul>
</li><li>contact us </li>
<li>about us</li>
<li class="dropdown">
property management and sales<span class="caret black"></span>
<ul class="dropdown-menu">
<li>Property Management</li>
<li>Buying a Property</li>
<li>Selling a Property</li>
<li class="goleft">home</li>
</li>
</ul>
</div>
</nav>
<!--end nav bar-->
If anyone has any ideas on how to fix this, that would be great. Thanks so much. -Beth
You could try changing the class col-lg-12 by col-md-12 or even col-sm-12.
This should make your navbar adapt better smaller resolutions.
When the navbar is collapsed, I can't click on the elements on the dropdowns because when I click on a dropdown, it's closing the navbar. How can I avoid this behavior ?
<nav ng-app="app" ng-controller="AppCtrl" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" collapse="navCollapsed" ng-click="navCollapsed=true">
<ul class="nav navbar-nav pull-right">
<li id="home-tab" ng-class="{active : isActive('home-tab')}" ng-click="activateTab('home-tab')" class="tab"><span class="glyphicon glyphicon-home"></span>Home</li>
<li id="stats-tab" ng-class="{active : isActive('stats-tab')}" ng-click="activateTab('stats-tab')" class="tab"><span class="glyphicon glyphicon-stats"></span>Stats</li>
<li id="administration-tab" ng-class="{active : isActive('administration-tab')}" ng-click="activateTab('administration-tab')" class="tab dropdown"><a class="dropdown-toggle"><span class="glyphicon glyphicon-book"></span>Administration<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Content</li>
<li>Terminal</li>
<li>Users</li>
</ul>
</li>
<li id="profile-tab" ng-class="{active : isActive('profile-tab')}" ng-click="activateTab('profile-tab')" class="tab dropdown"><a data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span>Profile<span class="caret"></a>
<ul class="dropdown-menu">
<li>Me</li>
<li>Company</li>
</ul>
</li>
<li id="logout-tab" class="tab"><a><span class="glyphicon glyphicon-off"></span>Logout</a></li>
</ul>
</div>
</div>
</nav>
JSFiddle
Note: In the JSFiddle example, when you click on a dropdown, it is not expending. I don't know why, anyway it is working in my code. Forget that and look at the issue that makes my collapsed navbar closing while clickng on a dropdown. ;)
It's because you have
ng-click="navCollapsed=true"
on the main navbar div
<div class="collapse navbar-collapse" collapse="navCollapsed" ng-click="navCollapsed=true">
which means that the navbar closes anywhere you click on it, not just on the tabs.
Here is a version that doesn't collapse the navbar when you click on 'Administration' - Fiddle
<div class="collapse navbar-collapse" collapse="navCollapsed">
New activateTab:
$scope.activateTab = function(tabId) {
if (tabId != 'administration-tab') {
$scope.navCollapsed = true;
}
$scope.activeTab = tabId;
};
I use bootstrap and i'm showing a language selection in the header.
Now when i reduce the width, bootstrap is going to put my elements in a mobile selection. (s. screenshot)
Most of the time thats a good thing, but in some cases i want options to stay visible. Fest option on the left side of the mobile menu.
<div class="navbar-header">
....
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
If I make two groups like
<ul class="nav navbar-nav navbar-right">
.. Non collapsable items
</ul>
<div class="collapse navbar-collapse" id="navbar-main">
.. collapsable items
</div>
then the non collapsable items are placed below the menu and not on the left side of it.
Here you go. Sounds like you want to exclude some menu items from the boostrap mobile view. I had similar question, and answer here.
Exclude menu item from the collapse of bootstrap 3 navbar
Reshared*
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News</li>
<li>Shop</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator</li>
<li>Extras</li>
</ul>
</div>
</div>
</nav>
original answer: Exclude menu item from the collapse of bootstrap 3 navbar
In order to remove a menu section from the auto-collapsing feature of Bootstrap, you need to move it outside of the . Something like the following:
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <!-- Items in here won't collapse -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-main"> <!-- Anything in here will collapse -->
<ul class="nav navbar-nav navbar-right">
Link
Another Link
</ul>
</div>
</div>
Anything inside the "collapse" div will collapse into the mobile menu. Anything that is not there, like the navbar-brand link in most menus, will not.
Hope that helps.
I am trying to customize bootstrap default fixed top nav to make it like one in images below. I am using latest twitter bootstrap 3.1.1. If you know please help me. You can even help me with any repository for it. The one in image is from i purchased which is using bootstrap 2x but i want to update it to 3x and use it in another template.
<div class="topHeaderSection">
<div class="header">
<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>
<a class="navbar-brand" href="index.html"><img src="assets/custom/img/logo.png" alt="My web solution" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
You need to take your dropdown button out of the div with the collapse class, and put it into the navbar-header div. Then create an additional navbar-header for the application title.
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Title - manually pull it left-->
<div class="navbar-header pull-left">
#Html.ActionLink("Application name", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<!-- Buttons that won't collapse - and manually pull right-->
<div class="navbar-header pull-right">
<!-- Your drop down button that is not part of the collapse group -->
<ul class="nav pull-left">
<li class="dropdown pull-right">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
<!-- The normal bootstrap button to show collapsed menu items -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Regular collapsed items -->
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav pull-right">
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Check out this answer to a similar question: https://stackoverflow.com/a/22978968/1721571.
Included in this answer is a link to a fiddle which should help you. I tried it out and it worked well without any changes.
Here's the link if you want to jump straight in. Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
UPDATE
Your additional requirements may require some JavaScript. From my understanding you want the navbar to be static until the user scrolls down to the point where the navbar reaches the top of the window. Then you want it to be fixed.
Add your Contact div above the first navbar element. I have made it a navbar-default so the difference is more clear. You don't have to use the bootstrap nav or container classes. You can create your own and get the style to your liking:
<div class="navbar navbar-default navbar-static-top" style="margin-bottom:0px" role="navigation">
<div class="container">
<div class="text-info">Small div with contact information</div>
</div>
</div>
Now change the original navbar to static to start off with. We will also give it a menu class so we can select it with jQuery:
<div class="navbar navbar-inverse navbar-static-top menu" role="navigation">
For the JavaScript:
$(document).ready(function () {
var menu = $('.menu');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('navbar-fixed-top');
$('.body-content').addClass('menu-padding');
} else {
$('.menu').removeClass('navbar-fixed-top');
$('.body-content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Notice how I have added a class to the body-content, this stops the content disappearing behind the navbar-fixed when it changes class.
.menu-padding {
padding-top: 80px;
}
Here is the complete fiddle: http://jsfiddle.net/seanobr/wsNYQ/
Here's what I have, I've tried moving around my section inside the "brand" and do a pull-right, outside the brand and outside the collapse and do a pull-left/right, while also trying to place it before or after the collapse section.
When adding it to the brand section it works, but it goes down to a new line. How do I keep it on the same line?
<body>
<header>
<nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">#Html.ActionLink("Manager", "Index", "Player")</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
#* <li class="active">#Html.ActionLink("Home", "Index", "Player")</li>
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li> <li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Change Password", "ManagePassword", "Account")</li>
<li>#Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li>
<li>#Html.ActionLink("Log Off", "LogOff", "Account")</li>
</ul>
</li>
</ul>
</div>
<div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
Fiddle with clearfix and expanded options on left side like normal: http://jsfiddle.net/jgoemat/u1j8o0n3/1/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News
</li>
<li>Shop
</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator
</li>
<li>Extras
</li>
</ul>
</div>
</div>
</nav>
You should be able to use pull-left and pull-right in 2 nav-header's to prevent the link from collapsing.
See: http://bootply.com/104747
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<div class="navbar-brand">Brand</div>
</div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li class="active">No Collapse </li>
</ul>
<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>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>Change Password</li>
<li>Update Profile Info</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Here is my other answer in Jade with some template logic just for fun :). See the other answer for additional info.
//- NOTE: 'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own
nav(class="navbar navbar-default navbar-fixed-top", role="navigation")
.container
//- Title
.navbar-header.pull-left
a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS
//- 'Sticky' (non-collapsing) right-side menu item(s)
.navbar-header.pull-right
ul.nav.pull-left
//- This works well for static text, maybe some initials
li.navbar-text.pull-left User Name
//- User Icon drop-down menu
li.dropdown.pull-right
a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;")
span.glyphicon.glyphicon-user
b.caret
ul.dropdown-menu
li
a(href="/users/id", title="Profile")
| Profile
li
a(href="/logout", title="Logout")
| Logout
//- Required bootstrap placeholder for the collapsed menu
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
//- The Collapsing items navbar-left or navbar-right
.collapse.navbar-collapse.navbar-left
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/news") News
li
a(href="/shop") Shop
//- Additional navbar items
.collapse.navbar-collapse.navbar-right
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/locator") Locator
li
a(href="/extras") Extras