I've gotten Bootstrap running on my site successfully but I'm trying to use the navbar-top-fixed functionality and whenever the page loads it pushes everything down about 20 pixels and I can't seem to diagnose why.
My code for the nav-bar is this:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container protected">
<ul class="nav pull-right nav-pills">
<li>Login</li>
<li><i class="icon-shopping-cart icon-white"></i> View cart <span class="badge badge-warning">2</span></li>
</ul>
</div>
</div>
</div>
And the page at this link will load the page properly, and then when it loads the page it pushes it down like this screenshot.
Has anyone seen this before or know any quick fixes? I am customizing one of the nav-bars on the page using lessCSS.
Please move the navbar markup in front of the "container" div. The "container" class has this margin defined.
See here: http://postimage.org/image/nu5pv8tkz/
Related
I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.
<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>
i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE
I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});
Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".
Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">
That's it, by default, liferay main navigation is being collapsed to dockbar, wich is hidden for not admin users in my solution. I tryed hooking the dockbar and deleting the collapse icon, but site-navigation keeps hiding on window resize.
Any ideas please?
P.D: I saw this post:
- Move collapsed menu button from the dockbar
Where the problem is solved, but as I mention there, I think it's not a "stylish" way of solving this problem and it's could give me more problems.
Thanks for reading.
On the fly i could tell you how to solve it the toggle button in case of no dockbar presence.
On your custom theme based on classic one you have to customize navigation.vm and insert the code to have the hamburger icon close to the navigation.
(The code is not tested)
<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
<div class="navbar-inner">
#* start toogle hamburger menu *#
<a class="visible-phone brand btn" data-toggle="collapse" data-target="#navigation">
<i class="icon-reorder"></i>
#language ("main-menu")
</a>
#* end *#
<div class="collapse nav-collapse">
<ul aria-label="#language ("site-pages")" class="nav nav-collapse" role="menubar">
#foreach ($nav_item in $nav_items)
#set ($nav_item_attr_selected="")
#set ($nav_item_attr_has_popup="")
#set ($nav_item_caret="")
#set ($nav_item_css_class="lfr-nav-item")
#set ($nav_item_link_css_class="")
#*continue...*#
I'm having an issue with my Bootstrap navbar button not showing the dropdown links when the screen is collapsed.
I have a navbar brand that hides on collapse but ever since i added a scrolling nav plugin my links dont show in dropdown. It is is also acting strangely in that if the page is below the level of the top section clicking the button just scrolls up to the top yet i cannot see what the conflict is.
here is a fiddle:
jsfiddle
My HTML is like so:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div id="twitterbootstrap">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand hidden-desktop page-scroll" href="#page-top">BrandHidden</a>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="brand visible-desktop page-scroll" href="#page-top">BrandVisible</a></li>
<li><a class="page-scroll" href="#page-top">Home</a></li>
<li><a class="page-scroll" href="#about">Link 1</a></li>
<li><a class="page-scroll" href="#services">Link 2</a></li>
<li><a class="page-scroll" href="#contact">Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
Any ideas would be greatly appreciated.
Edit: its complicated to me.... dont laugh im only new ;)
The problem is in your custom css. In the rule that you added for .hidden-desktop you added position: relative. I'm not sure why you need position relative anyway but what it's doing is capturing the click event for the entire navbar. You can see this by adding pointer-events: none to the rule and it will magically work.
The pointer-events property in css basically says to allow the mouse to penetrate the layers of your design and register click events on things that are otherwise obstructed by some higher layer. Although adding pointer-events: none works to demonstrate the problem here, it only has IE support in version 11, so I recommend removing the position: relative property. There is no logical reason I can think to have position set given that the display is set to none.
.hidden-desktop {
display: none !important;
position:relative; /*remove this*/
}
Here's the updated fiddle: http://jsfiddle.net/jme11/m3m99fhr/7/. I linked the Bootstrap files now in the external resources so that you can see it working in fiddle itself.
How about bootstrap.css?
Try this one:http://jsfiddle.net/iboylmz/McHUc/41/
I am using the Bootstrap scrollspy plugin (v2.0.0) which works without a problem when the page loads first.
The navigation bar as well as the content sections get updated via ajax calls (add or remove menu items). After this scrollspy doesn't highlight the newly added items anymore.
How do I tell scrollspy to refresh? Or maybe attach scrollspy manually to the following code?
<body data-spy="scroll" data-target=".subnav" data-offset="0">
<div id="listing">
<div class="subnav">
<ul class="nav nav-pills nav-stacked">
<li>Home & Garden</li>
<li>Computers & Networking</li>
</ul>
</div>
<div>
<section id="cat2">...</section>
<section id="cat5">...</section>
</div>
</div>
</body>
scrollspy('refresh') will simply do what the name says!
In my case I added the follwing code after the ajax call:
$('[data-spy="scroll"]').each(function () {
$(this).scrollspy('refresh');
});