Responsive Navigation in HTML/CSS using Foundation framework - html

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 is not clickable on mobile but works on desktop browser

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

Top Bar Drop Down not working in Foundation 6.2.4

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

Zurb Foundation framework not working properly

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();

Div data is not getting showed

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/

How to i keep my logo from overlapping on to my main menu bar when i open on an tablet

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>