I noticed that when I scroll upwards fast in Safari, the sticky nav jumps around, then I have to scroll slowly again to get it to click back into it's proper place. I'm using Foundation 6. Also, this is a new issue, as everything used to work just fine in Safari, but something must have changed in the past 4 months or so. See below for an example of the issue.
Here's the HTML for the nav bar. I haven't done anything special with the CSS.
<nav class="top-bar-container hide-for-small-only" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<ul class="menu menu-hover-lines" data-magellan>
<li><a class="menu-options" href="home">Home</a></li>
<li><a class="menu-options" href="projects">Projects</a></li>
<li><a class="menu-options" href="articles">Articles</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
The issue only arises in Safari. Chrome, etc. everything works fine. Has anyone else had this problem? Any help is appreciated.
Had the same problem. I added an id to the body tag and then anchored the top container to it.
<body id="the-body">
<div data-sticky-container>
<div data-sticky data-margin-top="0" data-top-anchor="the-body:top" data-stick-on="small">
<div class="top-bar topbar-sticky-shrink" id="top-menu">
<div class="top-bar-title">
NAME
</div>
<div class="top-bar-right">
<ul class="menu" data-magellan>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
</div>
</div>
</div>
</div>
Related
Okay so I have a nav bar for my website and I have never ran into this issue. All my text goes right behind my nav bar and not under. It could be because my navbar is made to auto adjust for mobile screens.
<body>
<nav>
<h1 class="brand">CHS Robotics</h1>
<ul>
<li>Club Info</li>
<li>The Team</li>
<li>Positions</li>
<li>News</li>
<li>Donate</li>
<li>Sign up</li>
<li>Login</li>
</ul>
<div style="clear: both"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">CHS Robotics</h3>
<h4 class="menu">Menu</h4>
<div style="clear: both"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
<h1 class="about">About CHS Robotics</h1>
More info: Cyrusmusic101.github.io
I suggest you clear your cache, since there's nothing wrong with the code and it seems perfectly fine when I access the link.
(Also, if something were wrong it would probably be the CSS, so it'd be useful to also post it).
I make a test.html file like below:
<body>
<div data-role="page">
<!--Head of the main web-->
<div data-role="header" data-position="fixed">
<h2><img src="pic/jquery-logo.png" alt="1"></h2>
</div>
<div role="main" class="ui-content">
<div data-role="tabs" id="tabs">
<!--3 row navbar--!>
<div data-role="navbar">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
<!--first nav bar of the 3-->
<div id="one" class="ui-body-d ui-content">
<ul data-role="listview" data-inset="true">
<li><img src="pic/business_standard_room.png"></li>
</ul>
</div>
<div id="two">
<ul data-role="listview" data-inset="true" class="ui-alt-icon">
</ul>
</div>
<div id="three">
<ul data-role="listview" data-inset="true" data-divider-theme="a">
</ul>
</div>
</div>
<!--footer of the page-->
<div data-role="footer" data-position="fixed">
<h5>Powered by Atek</h5>
</div>
</div>
I put the order.html and the test.html in the same folder.but when I click the link in the first tab.it returns me error.here is the error the chrome developer console showed
XMLHttpRequest cannot load file:///media/IRM_CCSA_X6/Mobile%20Website/Hotel/order.html. Received an invalid response. Origin 'null' is therefore not allowed access.
jQuery Mobile uses AJAX for the navigation inside the website, so when you press the link an AJAX call is done in order to get the new page.
I suppose that you are not using a server to test your website (just the file:/// protocol), and I think that is the problem. It has been reported a bug that local files are not loaded correctly using AJAX on Chrome, so you should use other browser or deploy a server to test it on Chrome.
Or in case you don't want to use the AJAX navigation, you could add the atribute data-ajax to the link in order to disable it:
<a href="order.html" data-ajax="false">
Hope this helps!
I am trying to get the bottom navbar which is inverse and non fixed and non navigation to stretch full width to cover the complete viewport...well in terms of the design effect it is to have a nice footer stretching full width non fixed...
it used to work when I was on an navbar-default navbar-inverse navbar-fixed-bottom role=presentation. I've tried to change div into row, set row before navbar... it is either I loose the full length or either I loose the inverse... each time I'm gaining something I'm loosing something else... Aaarrrggh... I don't know where to look anymore and I don't have enough knowledge to go and mess around with the media attributes... Anyone has a solution? Thanks a bunch... Max
<nav class="navbar-default navbar-inverse" role="presentation">
<div class="row">
<div class="col-md-3">
<ul>
<li><strong>Partner Companies:</strong><br>
Monsoon Restaurant<br>
Kasha Boutique Hotel<br>
Konokono Beach Villas<br>
Livingstone Restaurant<br>
Seyyida Hotel & Spa</li>
<span><a class="glyphicon-copyright-mark"></a>Copyright SERENE TOURS ZNZ 2014</span>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><strong>Office Tanzania:</strong><br>
Kenyatta Shangani<br>
P.O. Box 1370<br>
Stonetown Zanzibar<br>
+255242234402 Tel<br>
+244242234411 Fax<br></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><strong>US Office:</strong><br>
250 Gabriel Circle #9<br>
Sapphire Lakes<br>
Naples FL US-34104<br>
+12393008592 Tel<br>
+12393528777 Fax<br></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><strong>Follow us:</strong><br>
<img src="_images/youtube30x30.jpg"> You Tube<br>
<span id="tumblr_button_abc123"></span><br>
<img src="http://www.socialmediabuttons.com/images/facebook6.gif" title=""><br>
<img src="_images/instagram.jpg" alt="Instagram"> Instagram</li>
</ul>
</div>
</div>
</nav>
I am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header.
I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is?
Any ideas? Thanks!
<script>
JQuery(document).ready(function(){
$("#accordion").accordion();
});
</script>
</a>
</div>
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">About</a></li>
<li><a id="link2" class="nav-section2" href="#section2">Design</a></li>
<li><a id="link3" class="nav-section3" href="#section3">3D + Animation</a></li>
<li><a id="link5" class="nav-section5" href="#section5">Video Production</a></li>
<li><a id="link6" class="nav-section6" href="#section6">Contact</a></li>
<li class="scrollTop"><span class="entypo-up-open"></span></li>
</ul>
</div>
</nav>
<div class = "accordion">
<article>
<h1 id="section1">About</h1>
<p>Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him</p>
</p>
</article>
and here's the CSS
#accordion {
padding-left: 100px;
}
http://imgur.com/EaQOT0g
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)