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!
Related
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
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'm new to Web Development, and i've written the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid first">
<p>Welcome to my Page, Here you can find most of the informations related to me</p>
</div>
The problem that I'm facing is that, my last div is not getting displayed in the page. What mistake am I doing ?
On a fixed navbar you have to add a padding to the <body> of your site:
From the Bootstrap Documentation:
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Make sure to include this after the core Bootstrap CSS.
http://getbootstrap.com/components/#callout-navbar-fixed-top-padding
body {
padding-top: 70px;
}
See the following snippet (little changes to support the responsive navbar too): https://jsfiddle.net/17mmmxps/1/
For some reason when ever i open my web page on a table the logo increase size and covers the links in my main menu bar.
here is my source code and css..
<div class="container">
<div class="logo"><a class="brand" href="index.html"><img src="../Website/SCM Logo.png" alt="optional logo"> </div>
<div id="mainmenu" class="menu_container">
<label class="mobile_collapser">MENU</label>
<!-- Mobile menu title -->
<ul>
<li class="active"></li>
<!-- Must create links here -->
<li>Mechanical</li>
<li>Electrical</li>
<li>Communication</li>
<li>Contact</li>
</ul>
</div>
<div class="triangle-up-left"></div>
<div class="triangle-up-right"></div>
</div>
</header>
You can try specifying a percentage size for you logo ex(style="max-height:50%; max-width:50%"). This will allow it to scale to different devices, and hopefully it will stop covering your main menu
Your a tag is not complete. Check following:
<div class="logo">
<a class="brand" href="index.html">
<img src="../Website/SCM Logo.png" alt="optional logo" />
</a>
</div>