I'm working on this project: https://kickit.gr/ and I have an issue with the mobile menu of the homepage (only!), on safari browser.
When the hamburger button is clicked, the menu, even though it opens and is clickable, it is invisible!
The mobile menu is effective < 750px screen width.
I don't own an iphone and the debugging through sites with virtual safari browsers isn't that effective. I have tried changing some css, but with no luck...
You can check the problem on the live site.
Here is most of the relative code:
function hamburgerButtonClick() {
var hamburger = $('.hamburger');
var menu = $('.menu');
var is_active = 'is-active';
var mobile_menu = 'mobile_menu';
if (!hamburger.hasClass(is_active)) {
hamburger.addClass(is_active);
menu.addClass(mobile_menu);
} else {
hamburger.removeClass(is_active);
hamburger.removeClass(mobile_menu);
menu.removeClass(mobile_menu);
}
}
.sticky_menu .menu {
display: block;
text-align: center;
padding-top: 30px;
margin: 0 auto;
float: none;
}
.mobile_menu {
display: block !important;
width: 100%;
position: fixed;
top: 70px;
background: #191b1a;
padding-top: 10px;
color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="sticky_menu" id="sticky_menu">
<div class="menu_holder">
<div class="logo"></div>
<button class="hamburger hamburger--spin" type="button" onclick="hamburgerButtonClick()">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="menu">
<ul>
<li></li>
</ul>
<div class="social_menu_mobile"></div>
</div>
</div>
</nav>
the .is_active class is used for the animation of the icon of the hamburger-menu, i don't believe it is relevant to the problem.
Any help is appreciated!
apparently there are some issues with overflow: hidden in Safari iOS.
I removed the property targeting the node, in the header_frontpage.css. Now it works as intended.
Related
so I am having an issue with setting up NG-ZORROs layout
I have the following layout
HERE IS A STACKBLITZ EXAMPLE OF THE SETUP
Where the HEADER should be fixed in position
The SIDE NAVIGATION (on the left) should also be fixed in position when the user is scrolling the content, but it also has an internal scroll if the menu items dont fit the screen
The CONTENT should have internal scroll so that
// WRAPPER
.wrapper {
height: 100vh;
}
// HEADER
.header {
color: white;
background-color: rgb(24, 132, 255);
height: 45px;
display: flex;
justify-content: center;
position: fixed;
z-index: 999999;
width: 100%;
}
// SIDE NAV MENU
[nz-menu] {
line-height: 64px;
height: 100vh;
overflow: auto;
}
[nz-menu]::-webkit-scrollbar {
display: none;
}
// CONTENT
.input {
border: solid 1px rgb(24, 132, 255);
}
.before {
margin-bottom: 20px;
display: flex;
justify-content: center;
background-color: rgb(184, 216, 208);
opacity: 0.3;
height: 300px;
align-items: center;
}
.after {
margin-top: 20px;
display: flex;
justify-content: center;
background-color: rgb(184, 185, 216);
opacity: 0.3;
height: 800px;
align-items: center;
}
// HERE IS WHERE THE ISSUE IS
nz-content {
padding: 0 50px;
margin-top: 64px;
// WE NEED THE OVERFLOW SO THAT ONLY THE CONTENT IS SCROLLABLE AND THE REST OF THE ELEMENTS ARE NOT
overflow: auto;
}
<nz-layout class="wrapper">
<!-- HEADER -->
<header class="header">
HEADER
</header>
<nz-layout class="content">
<!-- SIDE NAVIGATION -->
<nz-sider nzCollapsible nzWidth="200px">
<ul nz-menu nzMode="inline" nzTheme="dark" class="menu-children">
<li nz-menu-item>
<span>Menu 0</span>
</li>
<li nz-submenu *ngFor="let item of menuItems" (nzOpen)="openMap.menu+item"
(nzOpenChange)="openHandler('menu'+ item)" nzTitle="{{'Menu' + item}}">
<ul>
<li *ngFor="let submenuItem of menuItems" nz-menu-item>
Menu {{submenuItem}}
</li>
</ul>
</li>
<li nz-menu-item (click)="openHandler('menu11')">
<span>Templates</span>
</li>
</ul>
</nz-sider>
<!-- CONTENT -->
<nz-content>
<!-- ONLY CONTENT IN THE NZ-CONTENT SHOULD BE SCROLLABLE -->
<p class="before">
CONTENT BEFORE SEARCHBAR
</p>
<!-- SEARCHBAR + AUTOCOMPLETE -->
<nz-input-group class="search-wrapper" nzSize="large">
<!-- INPUT -->
<input
class="input"
type="text"
nz-input
placeholder="Click here and scroll..."
[nzAutocomplete]="auto"
/>
<!-- AUTOCOMPLETE -->
<nz-autocomplete #auto>
<nz-auto-option [nzDisabled]="true">
<span class="no-results"> No Results </span>
</nz-auto-option>
</nz-autocomplete>
</nz-input-group>
<p class="after">
CONTENT AFTER SEARCHBAR
</p>
</nz-content>
</nz-layout>
</nz-layout>
My issue is that in order to achieve that i have set up the CONTENT with overflow: auto and everything works as expected... until I added a search bar with an autocomplete box.
Now when you click the search box and scroll on the content the autocomplete box stays in position instead of sticking to the input field of the the search bar - see image
HERE IS A STACKBLITZ EXAMPLE OF THE SETUP
I was able to do some hacky workarounds, but they dont work 100%.
Does anyone know why setting up the nz-content with overflow:auto breaks the autocomplete box position ?!
Ok, after a lot more research I was able to find a working solution to the problem.
It turned out to be the following
In the usage of tooltip (including popconfirmăpopover), body element's scroll event will update the position of tooltip. It will never update the position of tooltip if the scroll event happens in a custom element.You can add cdkScrollable directive to achieve the goal. Take notice that you need to import relative package import {ScrollingModule} from '#angular/cdk/scrolling';, for more information you can visit scrolling/api.
source - ng-zorro (bottom of the page)
I also found this stackoverflow question about Material Design Autocomplete
So based on those two, what ended up doing is I imported the ScrollingModule to my module like so
import { ScrollingModule } from '#angular/cdk/scrolling';
#NgModule({
imports: [
// ...
ScrollingModule,
],
// ...
})
export class MyAppModule { }
and then just applying the cdkScrollable to NZ-CONTENT
<nz-content cdkScrollable> CONTENT GOES HERE </nz-content>
Here is a link with the working solution - line 37
I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
still very new to this so apologies in advance.
In my footer, the desktop view works fine. As does the landscape mobile view. Heres how it looks on those two views
Landscape views
But in mobile portrait, the social media icons are missing, where have i gone wrong?
Portrait View
HTML code for my footer
<footer class="nav navbar-fixed-bottom navbar-default">
<div class="container-fluid">
<p>© 2017 Example Example</p>
<ul>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-instagram"></span></li>
<li><span class="fa fa-snapchat"></span></li>
<li><span class="fa fa-youtube"></span></li>
</ul>
</div>
</footer>
CSS for footer styling
footer {
background-color: #000000;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
footer p {
float: left;
text-align: center;
margin-top: 15px;
}
footer ul {
list-style: none;
display: flex;
flex: 1;
flex-direction: row;
float: right;
font-size:35px;
margin-top: 2px;
}
.fa-twitter {
margin-right:10px;
color: #fff;
}
.fa-twitter:hover{
color: #00aced;
}
.fa-facebook {
margin-right:10px;
color: #fff;
}
.fa-facebook:hover{
color: #3b5998;
}
.fa-instagram {
margin-right:10px;
color: #fff;
}
.fa-instagram:hover{
background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
.fa-snapchat {
margin-right:10px;
color: #fff;
}
.fa-snapchat:hover{
color: #fffc00;
}
.fa-youtube {
margin-right:5px;
color: #fff;
}
.fa-youtube:hover{
color: #cb2027;
}
Any help would be appreciated!
Most likely the ulwith the social icons simply doesn't fit into the width of the footer next to the text of the p tag and is pushed below into a new line (both are floated). But since the height is fixed (50px), it's hidden. Try to change the height of footer to sonething like 100px for testing, then you'll see if this is what's happening. If yes, you have to make everything a little bit smaller (within a media query) so that it can fit into one line.
Your issue is that your social icons are too big, so the entire <ul> is wrapping to the next line, but since you have a defined height on the <footer> it falls outside of the viewport. Try making your icons smaller, or maybe do something to your <p> to have its text wrap two lines in a narrower width.
You might want to try putting body tags around everything like
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body class="works_on_smartphone">
.
.
.
<footer>
.
.
.
</footer>
</body>
</html>
This might help.
Another method you might want to look at is using flexbox for you unordered list
as described here: [1]: Flexbox with Unordered list
Charles
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.