On my custom shopify site when the main menu is in responsive mode, the links get all wonky and out of line, but only in a short area that seems to be random depending on browser.
Here is how they are supposed to look:
Here is how they look when they are breaking:
According to all of the responsive code, they are set up all the same.
Here is the code:
li a {
display: block;
padding: 7px 10px !important;
text-align: left !important;
}
li ul li:first-child {
display: none !important;
}
li ul li {
font-size: 13px !important;
clear: left !important;
text-align: left !important;
display: block !important;
}
<li class="site-nav--has-dropdown" aria-haspopup="true">
<a href="/pages/studios" class="site-nav__link">
STUDIOS
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul class="site-nav__dropdown">
<div>
<li>
STUDIOS
</li>
<li>
LOCATIONS
</li>
<li>
UPCOMING CLASSES
</li>
<li>
EVENTS
</li>
</div>
<span class="arrow"> </span>
</ul>
</li>
Related
I have a ul list like below. I want to make equal space between each li elements, in all viewports - desktops/ mobile/ table.
I had give padding-right for the icons inside the li, but this does break when seen in other resolutions (like mobile).
How to give equal ideal spacing between the li elements in all the resolutions?
I want the horizontal list of li elements to be center-aligned and equally spaced on whichever screen (desktop/ phone/ tablet)
<ul class="navbar-nav navbar-right">
<li class="dropdown">
<a href="javascript:void(0);">
<img src="1.svg" class="imgicon">
<span class="username">li 1</span>
</a>
</li>
<li class="dropdown" id="li2" >
<a href="javascript:WindowLocation('/123');">
<img src="2.svg" class="imgicon">
<span class="hidden-xs">li 2</span>
</a>
</li>
<li class="dropdown" id="li3" >
<a href="javascript:WindowLocation('/123');">
<img src="3.svg" class="imgicon">
<span class="hidden-xs">li 3</span>
</a>
</li>
<li class="dropdown" id="li4" >
<a href="javascript:WindowLocation('/123');">
<img src="4.svg" class="imgicon">
<span class="hidden-xs">li 4</span>
</a>
</li>
</ul>
as #Laif suggested you can try the flexbox. Flex can does exactly what you are asking for.
Notice the below code. it has 4 li inside ul and we have space between all li.
on mobile it will look like
ul {
display:flex;
list-style:none;
padding: 0px;
justify-content: space-between;
}
li{
border:1px solid grey;
padding:5px 10px;
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
`
Solution 1. Try viewport meta tag to tell the browsers on whichever device to use the same measurements. It maintains the same aspect ratio on all devices.
Solution 2. If solution 1 does not work for you, then try css media queries to make the right spacing on mobile and other screens.
try this:
in css you can apply
*{
margin: 0;
padding: 0;
}
ul
{
text-align: center;
}
ul li
{
list-style: none;
display: inline-block;
padding: 20px;
}
#media(max-width:340px)
{
ul li
{
padding: 15px;
}
}
you will get your li in center of the screen in all the resolution
I'm trying to build a drop-down menu with the template of this menu: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
However, in my browser, the dropdown menu is slow to respond at hover, if it does at all, what is the any reason for this?
Note: The code (functionality and design of drop-down menu) is working but it's very flickery when it catches the hovering, as opposed to the w3Schools example.
A very specific example of the problem is that when I move the mouse slightly away from hovering and back into hovering, the hovering doesn't activate drop-down feature at all.
SCSS (Partials contain only mixin & variable declaration for simple design stuff, not expected to influence performance very much.) :
#import 'color';
#import 'box-shadow';
#import 'border';
#mixin dropdown-template() {
ul {
list-style-type: none;
margin: -10px 150px 0 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
}
li a, .dropbtn {
display: inline-block;
color: $netflix-black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: $netflix-red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
max-width: 200;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
}
& the SCSS later directly compiled to CSS-file linked in CSS:
#ULTRAHEADER {
background: $linear-gradient-facebook-dark;
& h1 {
text-align: left;
margin-left: 40px;
}
#include dropdown-template;
}
& relevant HTML:
<header id="ULTRAHEADER">
<h1>Principles</h1> <!-- The Meta-Title above 4 AoL -->
<ul>
<li class="dropdown"><a class="dropbtn">Spiritual</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Relationship</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Physical</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Intellectual</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
</ul>
</header>
Please ask for whatever other info you need, thanks
CodePen is here: http://codepen.io/anon/pen/BKVMoY
ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
span:last-of-type {
float: right;
}
<ul>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
Why isn't the floated element underlined?
How can I make it clickable for space between the spans?
Why isn't the floated element underlined?
16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
To fix that, you can set text-decoration: inherit on the floated span.
span:last-of-type {
float: right;
text-decoration: inherit;
}
How can I make it clickable for space between the spans?
You can set the <a> to display:block, it will the occupies the entire width available.
a {
display: block;
}
ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
a {
display: block;
}
span:last-of-type {
float: right;
text-decoration: inherit;
}
<ul>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
I think you can just add display: block; to the anchor tags in order to make the entire row clickable. I'm not exactly sure why the floated element removes the underline.
<ul class="whole-row-link">
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
ul.whole-row-link li {
position: relative;
}
ul.whole-row-link li a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
I was able to make the space between the link clickable but it stillls looks weird when you dont have underline.
I used the flexbox to acheive the effect of the clickable.
`http://codepen.io/Ebeldev/pen/BKVMwP`
Below is my code:
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
}
#sam_ul li {
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF';
}
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
The content pseudo element is displayed differently in both IE and mozilla. By different I mean in IE it is displaying correctly while in mozilla it is adding some extra padding and displaying the content.
check the difference between the first li element and the second li element.
Can anyone help me with this?
Add padding:0 to unordered list
#sam_ul{
padding:0
}
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF'; }
#u_l_sear:before {
content: '\0FBF'; }
<body>
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
</body>
Try to normalize everything. HTML and body has default margin and padding for every browser that could ruin your design. Almost all block elements has that.
Try:
html,body{
margin: 0;
padding:0;
}
Or download and add normalize.css
I have a weird problem where my links work fine on one page or fail to do so on another. Here is my code for the non-working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
ABOUT US
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
And the code for the working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
<a class="activeLink" href="side2.html">ABOUT US</a>
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
I am able to see the links fine, but they are not clickable.
Here is the CSS for the nav, ul and wrapper:
nav {
background-color: #2a2a2a;
width: 50%;
height: 200px;
float: left;
}
nav ul {
list-style: none;
height: 200px;
}
nav ul li {
float: left;
margin-top: 86px;
margin-left: 25px;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav a:hover {
color: #f25e44;
}
.activeLink {
color: #f25e44;
}
#wrapper {
width: 1400px;
/*border: 1px solid black;*/
margin-left: auto;
margin-right: auto;
box-shadow: 10px 5px 5px 10px #888888;
}
EDIT: I figured out the issue. I had a div overlapping my ul.
FIDDLE
The # would normally reference an anchor on your page and scroll there. Since you are just using the # it links to itself, so the page wouldn't reload, and would stay in the same place.
Your CSS also specifies not to decorate (underline) the hyperlinks, giving the impression that the link does nothing.
Edit: http://jsfiddle.net/2L3hL7w6/
I've added some CSS to highlight in red if a link has been visited - you'll see if you click on one of your links on the page it changes to red, showing the link does in fact work.
nav a:visited {
color: #ff0000;
}
All the links are the same in your example code. So when you once clicked one link....nothing more will happen since you are already there.