On Google Chrome the dropdown menu (when clicked) gets displayed in the middle of the screen then gets aligned properly above the icon menu. Here's an image that will describe it better.
I am sure that it's not a CSS problem because it works perfectly normal on FireFox but not on Chrome.
Code:
<paper-toolbar class="navbar-inverse">
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Questions</paper-item>
<paper-item>Opinions</paper-item>
<paper-item>Codes</paper-item>
</paper-menu>
</paper-menu-button>
<span class="title">CodeIts</span>
<ul class="navbar-nav list-inline">
<li>
<paper-button class="signup" ink="circle">Sign up</paper-button>
</li>
<li>
<paper-button class="login" ink="circle">Log in</paper-button>
</li>
</ul>
</paper-toolbar>
Related
We have a very large menu, so we have provided a scrollbar to that menu. But due to that scrollbar sub-menu are stopped to opening up.
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="menus-list">
<template is="dom-repeat" items="{{menuItems}}">
<template is="dom-if" if="{{!item.subMenuItems}}">
<li>
{{item.name}}
</li>
</template>
<template is="dom-if" if="{{item.subMenuItems}}">
<li class="dropdown">
{{item.name}}<span class="caret"></span>
<ul class="dropdown-menu scrollable-menu">
<template is="dom-repeat" items="{{item.subMenuItems}}">
<template is="dom-if" if="{{!item.subMenuItems}}">
<li>{{item.name}}
</li>
</template>
<template is="dom-if" if="{{item.subMenuItems}}">
<li class="dropdown dropdown-submenu">
{{item.name}}<span class="caret-right pull-right"></span>
<ul class="dropdown-menu">
<template is="dom-repeat" items="{{item.subMenuItems}}">
<li>{{item.name}}</li>
</template>
</ul>
</li>
</template>
</template>
</ul>
</li>
</template>
</template>
</ul>
</div>
and the CSS code is
.scrollable-menu{
height: auto;
max-height: 400px;
overflow-x: hidden;
}
The scrollbar is coming up properly but sub-menu stops to open up. Please suggest
Try This:
.scrollable-menu
{
overflow-x: auto;
max-height: 400px;
}
Trying to implement the dropdown on for the first time on this site, and have been having issues with it. Probably something I have missed but I've been looking at it for a while now and can't see what's wrong!
Below is a copy of the code on my page (Which I have copied from here: https://foundation.zurb.com/sites/docs/top-bar.html)
<div class="top-bar">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" style="display: none;">
<button class="menu-icon dark" type="button" data-toggle=""></button>
</span>
<Strong>Polaris CI Performance Board</Strong>
</div>
<div id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li>
One
<ul class="menu vertical">
<li>One</li>
</ul>
</li>
<li role="menuitem">Two</li>
<li role="menuitem">Three</li>
</ul>
</div>
<div class="top-bar-right">
</div>
</div>
</div>
As you can see from the screenshot the dropdown isn't compressing:
The dropdown menu (or any component that uses JavaScript, which you can identify by the data-attributes) requires the Foundation JavaScript to be initialized on the page. Your screenshot looks like this is not running... Make sure at the bottom of your <body> tag you have
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
See e.g. http://foundation.zurb.com/sites/docs/installation.html#html-starter-template
I'm trying to make a neat little responsive website and I come across consistent problems, and I can't seem to be able to pinpoint the problem.
Whenever I'm making a menu and use or other elements, they turn into plain html e.g.: all list elements will have bullets and be simply plain text, without any background.
Attached is an example image:
My code for this is:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
Here is another example:
And my code is:
<div class="row" style="float: right; display: table-cell;vertical-align: middle;">
<button type="button"
id="voltage_button"
onclick="measureVoltage();">
Voltage
</button>
<button type="button"
id="octiv_current_button"
onclick="measureCurrent();">
Current
</button>
<button type="button"
id="phase_button"
onclick="measurePhase();">
Phase
</button>
</div>
Im not sure what you want exactly, and it's kinda difficult to understand what you want, but as far as I understand, you want the bullet points to disappear and also inlining the menu.
HTML:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Web</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>Voltage</li>
<li>Current</li>
<li>Phase</li>
</ul>
</li>
</ul>
</section>
</nav>
JS:
$(document).foundation();
I just ran into this problem where the header or nav-bar hides everything underneath it where it should push everything down.
Here is a photo of how it looks like:
As you can see there is a "tekstas" list item hidden underneath nav-bar.
Here is my code:
<ion-view hide-back-button="false" has-navbar="true" title="Menu">
<ion-side-menus>
<ion-side-menu-content>
Content!
<button ng-click="toggleLeft()">
Toggle Left Side Menu
</button>
</ion-side-menu-content>
<ion-side-menu side="left">
<ul class="list">
<li class="item"> tekstas</li>
<li class="item"> tekstas1</li>
<li class="item"> tekstas2</li>
</ul>
</ion-side-menu>
</ion-side-menus>
</ion-view>
I believe you need to wrap your list with <ion-content class="has-header">
<ion-content class="has-header">
<ul class="list">
<li class="item"> tekstas</li>
<li class="item"> tekstas1</li>
<li class="item"> tekstas2</li>
</ul>
</ion-content>
I'm working with twitter bootstrap responsive nav bar and I'm trying to figure out how to make the brand show up only when the nav bar is in collapsed mode.
I'm thinking there might need to be some extra js involved but i'm not sure what that is or where to put it.
Here's what I've got:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Navigation</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav nav-pills">
<li>Nav 1</li>
<li>Nav 2</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Programs
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li>Program 1</li>
<li>Program 2</li>
<li>Program 3</li>
<li class="divider"></li>
<li>Program A</li>
<li>Program B</li>
<li>Program C</li>
</ul> <!-- closes dropdown menu -->
</li> <!-- closes dropdown class -->
</ul> <!-- closes nav-pills -->
</div> <!-- closes collapse -->
</div> <!-- closes container -->
</div> <!-- closes navbar-inner -->
</div> <!-- closes overall navbar -->
Right now, brand displays all the time, but I want it to display only when in collapsed mode so viewers know that is the nav bar. They don't need to see it in larger screen modes.
Any resource might help.
Thanks for your time.
Craig
An easy way to solve this problem is to use the Responsive utility classes provided by Bootstrap:
Bootstrap 4:
Source
Bootstrap 4 alpha:
Bootstrap 3:
Example:
<a class="brand hidden-lg" href="#">Navigation</a>
Bootstrap 2:
Example:
<a class="brand hidden-desktop" href="#">Navigation</a>
For Bootstrap 3 use the below classes
Ref: http://getbootstrap.com/css/#responsive-utilities-classes
Since Bootstrap3.2 visible-xs, visible-sm etc. are deprecated. Reference: http://getbootstrap.com/css/#responsive-utilities-classes
So in this case you should use either:
<a class="brand visible-xs-block" href="#">Navigation</a>
or
<a class="brand visible-xs-inline" href="#">Navigation</a>
or
<a class="brand visible-xs-inline-block" href="#">Navigation</a>
depending what type of display property should be applied to this link.
This will display your Navigation brand link only when your navigation is collapsed