I tried the other solutions on stackoverflow but they did not work.
The navbar or the banner code is so complex and I can not implement the other solutions.
I want to delete this navbar from all the files (mobile and desktop version) and addd it to a separate HTML file so I can reach from other websites files.
The idea I want to do is, I don't want to change the menu items from every file. Just want to do once.
<!-- Header desktop -->
<div class="container-menu-desktop">
</div>
<!-- Header Mobile -->
<div class="wrap-header-mobile">
<!-- Logo mobile -->
<div class="logo-mobile">
<img src="images/icons/logo-01.png" alt="IMG-LOGO">
</div>
<!-- Button show menu -->
<div class="btn-show-menu-mobile hamburger hamburger--squeeze m-r--8">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</div>
<!-- Menu Mobile -->
<div class="menu-mobile">
<ul class="main-menu-m">
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
</li>
<li>
XXX
</li>
</ul>
</div>
<!-- -->
<div class="wrap-logo container">
<!-- Logo desktop -->
<div class="logo">
<img src="images/icons/logo-01.png" alt="LOGO">
</div>
<!-- Banner -->
<div class="banner-header">
<img src="images/banner-01.jpg" alt="IMG">
</div>
</div>
<!-- Navbar STARTS HERE -->
<!-- -->
<div class="wrap-main-nav">
<div class="main-nav">
<!-- Menu desktop -->
<nav class="menu-desktop">
<a class="logo-stick" href="index.html">
<img src="images/icons/logo-01.png" alt="LOGO">
</a>
<ul class="main-menu">
<li class="main-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
</ul>
</nav>
</div>
</div>
</div>
You could achieve this using an .
Just host the navbar as a unique site and than reference it like this:
<iframe src="http://host:port/navbar"></iframe>
Place this file on a server
Fetch file contents through ajax
Replace this content with Javacript/Jquery.
Related
I'm building a campaign site for my school. I am implementing a sidebar that changes colour on different sections of the website when its in viewport. I'm unable to make the scrollspy work.
This is what I have: https://codepen.io/aahlfeeyann/pen/oeBGdq
<body data-spy="scroll" data-target="#sidebar">
<div class="wrapper">
<nav id="sidebar">
<ul class="sidebar visible">
<li id="step1" class="active">
<a href="#hero">
<span>Home</span>
</a>
</li>
<li id="step2">
<a href="#about">
<span>About this Campaign</span>
</a>
</li>
<li id="step3">
<a href="#mvps">
<span>Our Participants</span>
</a>
</li>
<li id="step4">
<a href="#appreciation">
<span>How to fight Procrastination</span>
</a>
</li>
<li id="step5">
<a href="#details">
<span>Event Details</span>
</a>
</li>
<li id="step6">
<a href="#team">
<span>Our Team!</span>
</a>
</li>
</ul>
</nav>
<div class="bg-wrapper">
<div class="section" id="hero">
</div>
<div class="section" id="about">
<h1>About the Campaign</h1>
</div>
<div class="section" id="mvps">
<h1>Our Participants</h1>
</div>
<div class="section" id="appreciation">
<h1>Appreciation...?</h1>
</div>
<div class="section" id="details">
<h1>Event Information</h1>
</div>
<div class="section" id="team">
<h1>About the Team</h1>
</div>
</div>
</div>
</body>
Add nav class to ul element.
As per Bootstrap Docs
Scrollspy currently requires the use of a Bootstrap nav component for
proper highlighting of active links.
HTML
<ul class="sidebar visible nav">
.....
...
..
.
</ul>
Scrollspy Docs Reference
Hope This Helps..
I am using Bookblock jQuery plugin as a transition effect between divs (consists of image and text) whenever the user clicks the link on the navigation bar.
Somehow, when the nav is at the top of the div, the links won't work.
<div class="container">
<ul class="bb-custom-grid" id="bb-custom-grid">
<li>
<ul id="services-submenu">
<li class="bb-current">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
<div class="bb-bookblock">
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
</div>
</li>
</ul>
</div>
You need to add class for next, and previous in your
<li class="next"></li><li class="previous"></li>
to render from page 1 to page 5.
Example:
<ul class="services-submen" >
<li class="previous">
<a id="bb-nav-prev" data-toggle="popover" href="#"><i class="fa fa-chevron-left"></i> </a>
</li>
<li class="next">
<a id="bb-nav-next"data-toggle="popover" href="#"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
Using Foundation 6, I try to get a responsive topbar that involves an animation on toggle (small screens).
I have this:
<div class="top-bar">
<div class="top-bar-title">
<strong>MyTitle</strong>
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="responsive-menu">
<span class="menu-icon" data-toggle></span>
</span>
</div>
<div id="responsive-menu" data-toggler data-animate="hinge-in-from-top spin-out"> <!-- no matter the type of animation is -->
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
1
</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
But even after importing motion-ui library, no transition happens.
Just a rough display:none to display:block of the menu and vice-versa.
It works when I replace data-responsive-toggle by data-toggle but I would lose responsiveness.
Is it a bug regarding Foundation 6?
I had the same problem. Solved it by adding both data-toggle and data-responsive-toggle to the first div:
<div class="top-bar" data-toggle="navmenu" data-responsive-toggle="navmenu" data-hide-for="medium">
<button class="menu-icon" type="button" ></button>
<div class="title-bar-title">Menu</div>
</div>
<nav class="top-bar" id="navmenu" data-toggler data-animate="fade-in fade-out">
<div class="top-bar-left">
<ul class="menu">
<li>Left Item 1</li>
<li>Left Item 2</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Right Item 1</li>
<li>Right Item 2</li>
</ul>
</div>
</nav>
I'm developing a site with a bootstrap three column design, where the pagination controls need to obey the following constraints:
Fit in the middle column.
Remain a single line without wrapping to multiple lines.
Be responsive. I don't need "full"/"fluid" col-xs to col-xl responsive, just something that is fluid above col-md and I can implement an alternative for col-xs and col-sm.
I'm utterly unable to work out how I can get the damn thing to behave at all.
The 'base' was sort of like this:
.pagination-button {
font-size: 2em;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
<div class='col-xs-8'>
<ul class="pagination">
<li>
<a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a>
</li>
<li>
<a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a>
</li>
<li>
<a class="pagination-item" href="?page=1">1</a>
</li>
<li class="active">
<a class="pagination-item" href="?page=2">2</a>
</li>
<li>
<a class="pagination-item" href="?page=3">3</a>
</li>
<li>
<a class="pagination-item" href="?page=4">4</a>
</li>
<li>
<a class="pagination-item" href="?page=5">5</a>
</li>
<li>
<a class="pagination-item" href="?page=6">6</a>
</li>
<li>
<a class="pagination-item" href="?page=7">7</a>
</li>
<li>
<a class="pagination-item" href="?page=8">8</a>
</li>
<li>
<a class="pagination-item" href="?page=9">9</a>
</li>
<li>
<a class="pagination-item" href="?page=10">10</a>
</li>
<li>
<a class="pagination-item" href="?page=11">11</a>
</li>
<li>
<a class="pagination-item" href="?page=12">12</a>
</li>
<li>
<a class="pagination-item" href="?page=13">13</a>
</li>
<li>
<a class="pagination-item" href="?page=14">14</a>
</li>
<li>
<a class="pagination-item" href="?page=15">15</a>
</li>
<li>
<a class="pagination-item" href="?page=16">16</a>
</li>
<li>
<a class="pagination-item" href="?page=17">17</a>
</li>
<li>
<a class="pagination-item" href="?page=18">18</a>
</li>
<li>
<a class="pagination-item" href="?page=19">19</a>
</li>
<li>
<a class="pagination-item" href="?page=20">20</a>
</li>
<li>
<a class="pagination-item" href="?page=21">21</a>
</li>
<li>
<a class="pagination-item" href="?page=22">22</a>
</li>
<li>
<a class="pagination-item" href="?page=23">23</a>
</li>
<li>
<a class="pagination-item" href="?page=24">24</a>
</li>
<li>
<a class="pagination-item" href="?page=25">25</a>
</li>
<li>
<a class="pagination-item" href="?page=26">26</a>
</li>
<li>
<a class="pagination-item" href="?page=27">27</a>
</li>
<li>
<a class="pagination-item" href="?page=28">28</a>
</li>
<li>
<a class="pagination-item" href="?page=29">29</a>
</li>
<li>
<a class="pagination-item" href="?page=30">30</a>
</li>
<li>
<a class="pagination-item" href="?page=31">31</a>
</li>
<li>
<a class="pagination-item" href="?page=32">32</a>
</li>
<li>
<a class="pagination-item" href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a>
</li>
<li>
<a class="pagination-item" href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a>
</li>
</ul>
</div>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
</div>
</div>
</body>
I was able to clean it up into a single line:
.pagination-button {
font-size: 2em;
}
.pagination {
display: inline-flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
justify-content: center;
white-space: nowrap;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
<div class='col-xs-8'>
<ul class="pagination">
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i>
</li>
<li>1
</li>
<li class="active">2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>8
</li>
<li>9
</li>
<li>10
</li>
<li>11
</li>
<li>12
</li>
<li>13
</li>
<li>14
</li>
<li>15
</li>
<li>16
</li>
<li>17
</li>
<li>18
</li>
<li>19
</li>
<li>20
</li>
<li>21
</li>
<li>22
</li>
<li>23
</li>
<li>24
</li>
<li>25
</li>
<li>26
</li>
<li>27
</li>
<li>28
</li>
<li>29
</li>
<li>30
</li>
<li>31
</li>
<li>32
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i>
</li>
</ul>
</div>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
</div>
</div>
</body>
How can I clean up this list so its more responsive?
CSS only would be great but after a few hours trying to get it working, I'm even willing to entertain JavaScript based approaches to solving this UX/UI problem I'm having.
I had the idea that I could solve it pretty easily if I could tag each <li> element with a priority and then add the elements to the <ul> in order of priority until they filled their allowed width, but I'm at a loss as to how to implementing something like this well and avoid all the usual browser edge cases, and I'd be throwing CSS out the window to do it, I'm still hoping their is a simpler CSS based answer.
Currently, .pagination isn't displayed as inline-flex. Bootstrap uses the class too and makes it inline-block. Change .pagination to ul.pagination so your CSS will be picked (since it's more specific).
This will force all the list items in one row.
Depending on what u want, u could give the ul a max-width and work with overflow-x:scroll; in your CSS. You will probably have to add in a width:100%; for your ul.pagination.
Sorry I wasn't specific enough. I've put my suggestions in the snippet below. (Check the ul.pagination CSS block)
It fits the middle column, and stays on one line.
The depending on what u want part is mainly regarding responsive, there are several ways to do this. This is a design/interaction question. I've suggested overflow-x: scroll; for this.
.pagination-button {
font-size: 2em;
}
ul.pagination {
display: inline-flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
justify-content: center;
white-space: nowrap;
width: 100%;
overflow-x: scroll;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
<div class='col-xs-8'>
<ul class="pagination">
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i>
</li>
<li>1
</li>
<li class="active">2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>8
</li>
<li>9
</li>
<li>10
</li>
<li>11
</li>
<li>12
</li>
<li>13
</li>
<li>14
</li>
<li>15
</li>
<li>16
</li>
<li>17
</li>
<li>18
</li>
<li>19
</li>
<li>20
</li>
<li>21
</li>
<li>22
</li>
<li>23
</li>
<li>24
</li>
<li>25
</li>
<li>26
</li>
<li>27
</li>
<li>28
</li>
<li>29
</li>
<li>30
</li>
<li>31
</li>
<li>32
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i>
</li>
</ul>
</div>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
</div>
</div>
</body>
I have a triple nested tab in my page. Whenever I activate a middle tag, it stays activated even when I click out of the first tab onto another tab. Here is an example in a jsfiddle.
http://jsfiddle.net/jNWMY/2/
For example:
Try clicking Acquisition then All Device then Facebook
Click Engagement tab in first row
Bottom row does not deactivate
Second example:
Try clicking Acquisition then All Device then Facebook
Click Desktop tab in second row
Bottom row does not deactivate
The first example provided by you can be solved by enclosing nav-tabs and tab-content under tabbable class. Try like this:
jsfiddle
<div id="dashboard_container" style="padding-left:50px; padding-right:50px; padding-bottom:50px; padding-top:10px;">
<h1> Dashboard </h1>
<div class="tabbable">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li>
<a href="#acquisition_tab" data-toggle="tab">
<b>Acquisition</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#engagement_tab" data-toggle="tab">
Engagement
</a>
</li>
<li> <a href="#retention_tab" data-toggle="tab">
Retention
</a>
</li>
<li> <a href="#revenue_tab" data-toggle="tab">
Revenue
</a>
</li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<div class="tabbable">
<ul class="nav nav-tabs" id="acquisition_tabs">
<li> <a href="#all_device_acquisition_tab" data-toggle="tab">
<b>All Device</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#desktop_acquisition_tab" data-toggle="tab">
<b>Desktop</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#mobile_acquisition_tab" data-toggle="tab">
<b>Mobile</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="all_device_acquisition_tab" class="tab-pane">
<div class="tabbable">
<ul class="nav nav-tabs" id="all_device_acquisition_tabs">
<li> <a href="#ad_all_acquisition_tab" data-toggle="tab">
<b>All</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_gamefuse_acquisition_tab" data-toggle="tab">
<b>Gamefuse</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_facebook_acquisition_tab" data-toggle="tab">
<b>Facebook</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_kongregate_acquisition_tab" data-toggle="tab">
<b>Kongregate</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_yahoo_acquisition_tab" data-toggle="tab">
<b>Yahoo</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="ad_all_acquisition_tab" class="tab-pane">
<p>all device ALL Acquisition</p>
</div>
<div id="ad_gamefuse_acquisition_tab" class="tab-pane">
<p>all device GAMEFUSE Acquisition</p>
</div>
<div id="ad_facebook_acquisition_tab" class="tab-pane">
<p>all device facebook Acquisition</p>
</div>
<div id="ad_kongregate_acquisition_tab" class="tab-pane">
<p>all device kongregate Acquisition</p>
</div>
<div id="ad_yahoo_acquisition_tab" class="tab-pane">
<p>all device yahoo Acquisition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="engagement_tab" class="tab-pane">
<p>Engagement tab</p>
</div>
<div id="retention_tab" class="tab-pane">
<p>Retention tab</p>
</div>
<div id="revenue_tab" class="tab-pane">
<p>Revenue tab</p>
</div>
</div>
</div>
</div>
And for the second mentioned problem you haven't provided tab-content for desktop and mobile tabs