This fixed top menu is working properly with desktop but with mobile, is not working. how to make this to work with mobile.
I am using bootstrap and font awesome.
Here is the code:
<!-- Navigation -->
<header class="nav">
<div class="nav__holder nav--sticky">
<div class="container-fluid nav__container nav__container--side-padding">
<div class="flex-parent">
<div class="nav__header">
<!-- Logo -->
<a href="index.php" class="logo-container flex-child">
<img class="logo" src="img/ERRE_logo_2.png" srcset="img/ERRE_logo_2.png 1x, img/ERRE_logo_2.png 2x" alt="logo">
</a>
<!-- Mobile toggle -->
<button type="button" class="nav__icon-toggle" id="nav__icon-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="nav__icon-toggle-bar"></span>
<span class="nav__icon-toggle-bar"></span>
<span class="nav__icon-toggle-bar"></span>
</button>
</div>
<!-- Navbar -->
<nav id="navbar-collapse" class="nav__wrap collapse navbar-collapse">
<ul class="nav__menu">
<li class="nav__dropdown active">
Início
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
<li class="nav__dropdown">
Portfolio
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
<li class="nav__dropdown">
Serviços
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
</li>
<li class="nav__dropdown">
Contactos
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
</ul> <!-- end menu -->
How can i make this work?
I fixed this by changing this: <li class="nav__dropdown">
To this: <li class="">
Now it's fixed and is working good.
Related
If I put the browser on half screen (windows button + left or right) the top menu items are unreadable and also if I zoom in the top menu are not visible.
Please below html and Css code I guess which is having issue
<div><nav class="navbar-inverse" ng-class="::{'navbar':!isViewNative, 'is-native': isViewNative}"
role="navigation">
<div ng-show="::!isViewNative" class="navbar-header">
<a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}"><span>{{::portal.title}}</span></a>
<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo" href="?id={{::portal.homepage_dv}}">
<img ng-src="{{::portal.logo}}" />
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sp-nav-bar">
<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 sp-navbar-toggle="" class="collapse navbar-collapse navbar-right" id="sp-nav-bar">
<!-- Include The Menu -->
<sp-widget widget="data.menu"></sp-widget>
<ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
<li><a href ng-click="openLogin()">${Login}</a></li>
</ul>
<ul ng-if="::user.logged_in" class="nav navbar-nav">
<!-- chat, avatar, and logout -->
<li class="dropdown hidden-xs">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<span class="visible-lg-inline">${Useful Links}</span>
</a>
<ul class="dropdown-menu">
<li><a ng-href="?id=ess_page_vtb">${Visual Task Boards}</a></li>
<li><a ng-href="?id=reports">${Reports}</a></li>
<li>${Support Portal}</li>
</ul>
</li>
<li ng-if="::data.connect_support_queue_id"><a href ng-click="openPopUp()">${Live Chat}</a></li>
<li><sp-widget widget="data.languageSelector"></sp-widget></li>
<li class="dropdown hidden-xs">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>
<span class="visible-lg-inline">{{::user.name}}</span>
</a>
<ul class="dropdown-menu">
<li><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}">${Profile}</a></li>
<li>${Logout}</li>
</ul>
</li>
<li class="visible-xs-block"><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}"><span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>{{::user.name}}</a></li>
<li class="visible-xs-block">${Logout}</li>
</ul>
</div>
enter code here
so i have got this code ( the data-toggle and data-target are black in my n++ also i used data target instead of data-target which shows me red..)
i want to make my page responsive for mobile users and large desktop users.
but when i zoom in to the display, there is on the right top corner the button which should open the drop down menu, but it doesn't.
<html>
<head>
<title>Built your Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!--jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<nav>
<nav class="navbar navbar-default navbar-static-top"> <!-- color, statisch-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data target=".navbar-collapse "> <!-- button, navbar mit dropmenu wenn bildschirm zu klein-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <!-- creates 3 lines in the toggle navigation when screen too little -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">TAIL
<!-- <span class="glyphicon glyphicon-home" id="homeIcon"></span> -->
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<!--<li><a class="navbar-brand" href="index.php">TAIL</a></li>-->
<li class="dropdown"> <a href="templates.php" class="dropdown-toggle" data-toggle="dropdown" >Templates</a></li>
<li class="dropdown"> <a href="pricing.php" class="dropdown-toggle" data-toggle="dropdown" >Pricing</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="register.php" class="dropdown-toggle" data-toggle="dropdown" >Sign Up
<span class="glyphicon glyphicon-user" id="sserIcon"></span>
</a>
</li>
<li class="dropdown">
<a href="login.php" class="dropdown-toggle" data-toggle="dropdown" >Log In
<span class="glyphicon glyphicon-log-in" id="logIcon"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>
You have an missing dash in your code.
Instead of this:
data target=".navbar-collapse "
do this:
data-target=".navbar-collapse "
And then it works.
I have this issue when the viewport switches to a mobile version
using bootstrap v3
when the navbar switches to the mobile version of itself , the 2nd and the 3rd element come on the same line , because they have a dropdown class under them.
as shown in the picture. img1 img2
if the drowpdown class isnt put then the elements show themselves properly
any help here?
<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 class="img-responsive" src="images/logo/logo.png" alt="Deccan Airsports Logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">
Home
</li>
<li class="scroll dropdown">
Hot Air Balloon <span class="caret hidden-sm hidden-xs"> </span>
<div class="dropdown-content hidden-sm hidden-xs">
Book A Ride
Membership
FAQs
</div>
</li>
<li class="scroll dropdown">
Services<span class="caret hidden-sm hidden-xs"></span>
<div class="dropdown-content hidden-sm hidden-xs">
Gliders
Sky-Diving
Drones
Hang-Gliders
</div>
</li>
<li class="scroll">Contact</li>
<li><a class="scroll" href="about.html">About</a></li>
<li><a class="scroll" href="faq.html">FAQs</a></li>
<li class="scroll dropdown">Events<span class="caret "></span>
<div class="dropdown-content hidden-sm hidden-xs">
News & Press
Branding
Advertisement
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
The issue might be with your "dropdown" class - make sure it doesn't have display:inline.
I'm trying to make a menu for smartphones & tablets, but when I create it, it always overflows the content of my website.
The effect I want to achieve is the same as the Twitter Bootstrap website — When you open it with smartphones, you can press the button and the menu rolls down and pulls the content of the website.
Here is my code:
<div class="dropdown">
<button class="navbar-toggle hidden-lg collapsed" data-toggle="dropdown" data-target="navbar-header" type="button">
<span class="glyphicon glyphicon-collapse-down">
</span>
</button>
<div class="col-xs-12 dropdown-menu navbar-inverse" role="menu">
<a class ="divider" href="#">Accueil</a><br />
<a class ="divider" href="#">Centres d'Interets</a><br />
<a class ="divider" href="#">CV</a><br />
<a class ="divider" href="#">Contact</a><br />
</div>
</div>
You can use the example from the documentation as a start:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
...
</div>
</nav>
You can find it here.
Try the below code. Courtesy: http://bootswatch.com Adjust the menu according to your requirements
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
In the above code,
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Gives the desired effect when the window size changes in browser or on small screens (Mobiles and tabs).
I am having issue with using bootstrap navbar with an image logo that overflows on the navbar. The issue is on the collapsed menu when opened on the iPhone. It looks something like this:
Here's the link to my site. Here's how I handle the image logo on the navbar:
<div class="navbar navbar-default navbar-fixed-top brandon-grotesque-bold">
<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 nav-title-logo" href="http://test.com/"> </a>
</div>
<div class="navbar-collapse in" id="navbar-collapse" style="height: auto;">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/tentang-kami">
Apaan sih ni?
</a>
</li>
<li>
<a href="/cara-bergabung">
Mau gabung?
</a>
</li>
<li>
<a href="/faq">
Faq
</a>
</li><li>
<a href="/contact">
Contact Us
</a>
</li>
</ul>
<ul id="registerCart" class="nav navbar-nav navbar-right">
<li>
Register
</li>
<li class="divider-vertical"></li>
<li>
Login
</li>
</ul>
</div>
</div>
I am using a background image for the logo. Any ideas on how to fix this? It seems that when I remove: webkit-box-sizing: border-box; from bootstrap it works just fine. I am not sure if this is the way to go.
What about adding something like
.navbar-collapse {
min-width: 100px;
}