Responsive header with a weird webkit bug - javascript

I'm currently building a new website but there is a small hiccup on webkit browsers.
http://typework.github.io/green-life/
If you browse to the url above and resize the browser to mobile size.
Open the navigation (click only once on the hamburger) and resize back to full screen. You can see that my navigation moved to the left. When you keep resizing the browser you see that it moves more and more to the left.
In Firefox I do not have this problem, Safari and Chrome does.
I used plain and simple JavaScript:
$('.menu-link').on('click', function() {
$('.nav').toggleClass('active');
return false;
});
And simple display: block css:
.nav {
display: inline-block;
float: right;
padding: 31px 0 0 0;
margin: 0;
}
#media(max-width: 992px) {
.nav {
position: relative;
margin: 0;
padding: 0;
display: none;
clear: both;
width: 100 %;
}
.nav.active {
display: block;
}
I do not seem to find the bug however. Any ideas?

I think there is a problem in the nav li, change it display:inline-block.
.nav li {
display: inline-block;
padding-left: 30px;
text-align: right;
}
I think this will solve your issue.
also make it display block in media query

Related

Changing positioning of elements depending on user screen size. How do I stack these elements for mobile devices?

I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.

Safari OS X 10.10.4 Font Weight Issue While Scrolling

I'm facing right now weird problem that so far occurs just in Safari (8.0.7) under OS X (Yosemite 10.10.4). What is the problem? I ahve two menu bars. Both are relative and positioning works fine. The point is that when I scroll, 50 px from top I add class that makes second bar position fixed + top 0. This also works perfectly but... when this class is added I see that font-weight of the target bar is changed to something smaller.
(I'm taking about bar that has items: "Australia", "New Zealand" etc.)
I've recorded my screen: https://www.youtube.com/watch?v=H9_VmXDqqBE. Please watch in HD. Top right. Second bar contains names of some categories. If you will look closer you will see that font weight is changed and names are much more thinner than they should be.
I'm pretty much confident about my code and:
I don't manipulate font-weight explicitly.
This happens just in Safari (OS X)
Chrome and FF work good.
It's a minor issue but I want to learn something new and face it.
Below are some code snippets to give you general preview of the situation.
$(window).scroll(function()
{
var top = $(window).scrollTop();
if (top > 50) {
$('#blog_categories_container').addClass('sticky_top');
} else {
$('#blog_categories_container').removeClass('sticky_top');
}
});
CSS for the "blog_categories_container" bar and "sticky_top" class:
nav#blog_categories_container.container_white {
background-color: rgba(0,0,0,0.66);
}
nav#blog_categories_container {
left: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
top: 50px;
width: 100%;
z-index: 1030;
}
nav#blog_categories_container ul {
float: right;
margin: 0;
overflow: auto;
padding: 0;
}
nav#blog_categories_container ul li {
float: left;
overflow: hidden;
padding: 5px 30px 5px 5px;
white-space: nowrap;
position: relative;
color: #cccccc;
}
nav#blog_categories_container ul li:last-of-type {
padding-right: 0;
}
nav#blog_categories_container.sticky_top {
position: fixed;
top: 0;
}
Can someone give me any hints? Thank you.
This generally happens when something causes the font smoothing to change (probably when you add/ remove the sticky_top class).
Try adding
-webkit-font-smoothing: antialiased;
to the nav#blog_categories_container section of your css file.
If that doesn't work try -webkit-font-smoothing: subpixel-antialiased;

Make Element Appear On Minimum Screen Size

I have a bug in my header when I shrink the screen size down. The nav is supposed to disappear (only to reappear if the mobile nav icon is clicked,) which is working fine. However, if I click the mobile nav icon, and then click it again to hide it, the nav stays hidden even when I expand the screen size out again.
I want the nav to show up again when the screen gets to 670px.
CSS
#media screen and (min-width: 671px) {
.nav {
display: block;
}
}
#media screen and (max-width: 670px) {
.navicon {
display: block;
}
.homeiconcontainers {
float: none;
width: 100%;
}
.header {
background: none;
opacity: 1;
}
.pagelinkcontainers {
float: none;
line-height: 50px;
background-color: black;
width: 200px;
padding-right: 0px;
text-align: center;
}
ul {
padding-left: 20px;
}
.nav {
display: none;
}
}
JavaScript
// Show Mobile Navbar Onclick
function MobileMenu (object) {
var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;
//Show nav element
for(var nav in elements) {
if(object!==nav) {
document.getElementById(nav).style.display='none';
}
if(object==nav && mobiledisplay=='block') {
document.getElementById(nav).style.display='none';
}
else {
document.getElementById(nav).style.display='block';
location.hash=pages[nav].title;
document.title=pages[nav].title;
}
}
}
My .nav is somehow getting display: none from either my 670px media query, or from the javascript function. I could also be mis-using the min-width media query, but I'm not sure.
Im assuming you don't need to see my HTML to figure this out, but if you would like to, let me know.
Now CSS takes precedence over the JavaScript inline styling forcing the nav bar to be visible.
#media screen and (min-width: 671px) {
.nav {
display: block !important;
}
Why?
JavaScript code setting inline styling wins from CSS styling. Or better said always takes priority to CSS rules except when that CSS rule has !important.

Bug with inside responsive menu

I am beginner in JS.
I found wonderful example of responsive menu, and put code inside functions.php. Menu must works like here http://filamentgroup.com/examples/rwd-nav-patterns/ but i have the bug - dropdown menu shift to the right in my site when I use tablet mode.
I tried to include this menu in my site, based on Bootstrap http://b.pusku.com
UPDATE:
Part of the problem with the fiddle was that the space allotted for the logo image was too wide, so I added the following to correct that:
#logo > img {
width: 25px;
}
To get the dropdown to float left at all times, add:
.nav-menu .nav-primary {
float: left;
clear: none;
}
to the #media screen and (min-width: 910px) rule...
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
.nav-menu .nav-primary {
float: left;
clear: none;
}
}
Once the navigation links collapse to a dropdown, they'll float left. The links will have an offset of 25px on the left because of the following rule in bootstrap.css (on line 728):
ul, ol {
padding: 0;
margin: 0 0 10px 25px; /*specifically this rule*/
}
You can override that, if you like, by adding margin-left: 0; to the .nav-primary ul rule:
.nav-primary ul {
border: 1px solid #e6e6e6;
margin-left: 0; /* add this to override the bootstrap.css rule*/
}
Finally, as the screen width narrows, the dropdown's width seems to stretch the entire width. If this is not a desired effect, add display: inline-block; to the .nav-primary rule:
.nav-primary {
clear: left;
margin: 0 0 2em;
display: inline-block;
}
I've also re-written the javascript that makes the "responsive" navigation collapse to a dropdown using more (appropriately named) variables so you may better understand why the script does what it does:
$(document).ready(function () {
'use strict';
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function () {
var nav = $(this),
navPrimaryTop = nav.offset().top, // top of div.nav-primary
navSkipNavTop = nav.prev().offset().top, // top of p containing a#main
topOfFirstLink = nav.find('li:first-child').offset().top, //top of "What We Done"
topOfLastLink = nav.find('li:last-child').offset().top, //top of "Contact Us"
navBelowSkipNav = navPrimaryTop > navSkipNavTop, //boolean indicating whether div.nav-primary is below the p containing a#main
lastLinkBelowFirstLink = topOfLastLink > topOfFirstLink, //boolean indicating whether "Contact Us" is below "What We Done"
displayAsMenu = navBelowSkipNav || lastLinkBelowFirstLink; // boolean indicating whether to collapse to a dropdown menu
$('body').removeClass('nav-menu');
if (displayAsMenu) {
$('body').addClass('nav-menu');
}
})
// toggle the menu items' visiblity
.find('h3').bind('click focus', function () {
$(this).parent().toggleClass('expanded');
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function () {
$('.nav-primary').trigger('testfit');
});
});
Here's an updated fiddle demonstrating the basics: http://jsfiddle.net/DD7MC/1/
I did not override either the margin-left or the display in the updated fiddle.
ORIGINAL:
I think it's a CSS conflict between rwd-nav.css and bootstrap.css. Try changing the class definition for .nav-menu .nav-primary h3 in rwd-nav.css to:
.nav-menu .nav-primary h3 {
position: absolute;
top: -10px; /* <-- change this line */
left: auto;
right: 0;
display: block;
width: 4em;
height: 3.75em; /* <-- change this line */
background: #ccc url(img/icons.png) no-repeat -205px 45%;
text-indent: -999em;
cursor: pointer;
font-size: inherit; /* <-- add this line */
}
Also, your hosting provider is returning a 404 for url(img/icons.png). You may want to make sure that file exists.

How to make css width work in firefox

I'm creating an web system, but it's not showing correctly in firefox (and probably not in IE too), but it's great in Google Chrome, the page is that: Page with errors
The problem is that my < ul> component is too large in Firefox. I'm using width: 760px; and repeating an small width image over this 760 pixels. But the firefox do it for more than 760 pixels (as you can see in the link).
This is my ul-html code:
<body id="maincontent">
<ul class="ulmenu">
<li><a href="#" >Registrar</a></li>
<li><a id="lastmenu" href="#" >Realizar login</a></li>
</ul>
</body>
And my css:
root {
display: block;
}
#maincontent
{
background-color: black;
width: 760px;
margin: auto;
}
ul.ulmenu
{
text-align: center;
margin-top:0;
display:table;
width: 760px;
max-width: 760px;
list-style-type: none;
height: 60px;
background-image: url(../image/menubg.png);
background-repeat: repeat-x;
/*
visibility: hidden;*/
}
ul.ulmenu li
{
float: left;
}
ul.ulmenu a
{
background-image: url(../image/menudiv.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
line-height: 60px;
display: block;
color: #ffffff;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
}
ul.ulmenu a:hover
{
color: #AAAAAA;
}
In order to make the options of the menu centralized, i created some code in JS with jQuery to do that. If I remove this code, the width of green image in firefox becomes smaller, but it's still bigger than necessary (about 100px), the chrome images keeps unchanged.
I know only basics of css. Can anybody point me how can I fix that?
----EDITED-----
Fiddler URL for code (but the error is only noticed on maximized browser):
See it on Fiddler
Here is what I understand.
Seems, In firefox your are adding padding-left to your element style which makes it wider.
ul.ulmenu li
{
float: left; //remove it
display: inline-block; // add it
}
Remove this line from js code.
$(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");
Solution: Give width: 551px and display: block to your ul.ulmenu CSS class. That will solve the issue.
Reason: The reason for the issue is FF and Chrome treating display: table differently. For an element with display set to table, FF adds the padding to the width, whereas Chrome doesn't. The solution is to use the display: block CSS property that behaves the same in both browsers (FF as well as Chrome adds padding to the width for block elements)

Categories