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>
Related
this is what I have so far.
<div class="header-wrapper-sticky">
<nav class="navicon">
<button class="hamburger-menu">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
<ul class="navlist">
<li>Home</li>
<li>Crystal Directory</li>
<li>Contact</li>
</ul>
</nav>
</div>
How I could flip/reverse the hamburger menu so that it faces left and how do I make the navlist go inside of the hamburger menu so that when its clicked it will come out of the side?
Materialize CSS Sidenav works on desktop browser: the sidebar shows up when clicked. But when I tested it on the mobile browser, the menu icon shows, but when clicked it does not open the side bar. The html/css source is given below:
<nav class="white">
<div class="nav-wrapper" >
<a href="/" class="brand-logo center">
<img src="/images/brand.png" width="150"/>
</a>
<a data-target="slide-out" class="sidenav-trigger">
<i class="large material-icons cyan-text text-darken-4">menu</i>
</a>
<ul id="slide-out" class="sidenav">
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Login<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>Employer</li>
<li>Job Seeker</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
and the js init source is
$('.sidenav').sidenav();
Thanks
enter image description here
Try to copy code from documentation and modify according to your needs.
try zIndex=1 to sidenav and nav class
I am trying to replicate the following codepen navigation bar although I have a simple logo on the left and two links on the right. The framework used is Zurb Foundation: https://codepen.io/IamManchanda/pen/LymroM?editors=1000
So far I cannot seem to get the menu responsive. When I use a large window, the mobile menu stays put and will not toggle like in the pen. Any ideas how to replicate this?
Template:
<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="navbar"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="navbar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">
<img id="logo" src="./assets/img/logo4white.png" alt="logo">HANYU.CO
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li id="home"><router-link class="link align-left" to="/">Home</router-link></li>
<li id="logout" v-if="this.$cookies.get('user')" #click="logout"><a>Logout</a></li>
</ul>
</div>
</div>
Thanks in advance!
I realized I was not calling $(document).foundation(); in the JavaScript. Oops!
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 have a menu-bar with on the left side my brandlogo and floating right I have my menu items (car, house, street, boat). I want these menu items to be at the same horizontal height as my * brandlogo * , now they somehow fall below that, not on same line clearly.
Second issue is that my mobile toggle menu works, but when you expand the menu then first its floated right and then it takes the full width. So it opens on the right (probably because of float:right) and then moves to the left to take the full 100% width I specified. I would like the toggle mobile menu to just open on the full width and not float right first.
Is it possible to achieve my goals.
Here my BOOTPLY... BOOTPLY
(just click on the mobile phone icon to see my second part of my problem).
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix container navbar-fixed-top">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<img alt="***brandlogo***" src="assets/images/logo.png">
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
<ul class="navbar-nav nav">
<li>
car
</li>
<li>
house
</li>
<li>
street
</li>
<li>
boat
</li>
</ul>
</div>
</div>
</div>
</div></div></div>
</div>
<div id="push"></div>
</header>