I've recently started to use LESS and am trying to convert my CSS to LESS for a project.
I'm trying to get li.active > a, li > a:hover working
#sidenav {
position: fixed;
top: 100px;
right: 0;
padding: 15px 10px 10px;
text-align: right;
li {
& > a {
color: #999;
&:hover {
//&:extend(.active > a);
color: #FFF;
background: none;
}
}
&.active > a:extend(& > a:hover) {}
}
}
But this doesn't work.
I'm looking at the documentation but it's not really making sense to me.
EDIT:
Found out that this works
#sidenav {
position: fixed;
top: 100px;
right: 0;
padding: 15px 10px 10px;
text-align: right;
li {
& > a {
color: #999;
&:hover {
color: #FFF;
background: none;
}
}
&.active > a {
&:extend(#sidenav li > a:hover);
}
}
}
But that's 3 lines where I think it could be 1.
Related
I am still learning CSS, and don't know PhP, so I am probably missing something simple here.
Trying to center the nav menu (ul.blog-menu) and can't seem to figure it out. Have reviewed the other threads on this topic and so far none of it worked for me.
I am using the Hemingway Theme by Anders Noren. Menu is offset to the left-center
The site is http://www.fredwbaker.com/
Menu, offset to left, showing element in inspector
The relevant code section in the stylesheet is below. THANK YOU for your insight!
/* -------------------------------------------------------------------------------- */
/* 5. Navigation
/* -------------------------------------------------------------------------------- */
.mobile-menu {
display: none;
}
.blog-menu {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 0 -20px;
}
.blog-menu ul {
margin: 0;
}
.blog-menu li {
line-height: 1;
margin: 0;
position: relative;
}
.blog-menu > li + li:before {
color: #444;
content: "/";
display: block;
font-size: 16px;
line-height: 1;
margin: -9px 0 0 -3px;
position: absolute;
left: 0;
top: 50%;
z-index: 1000;
}
.blog-menu a {
display: block;
padding: 27px 20px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba( 255, 255, 255, 0.5 );
font-size: 13px;
}
.blog-menu a:hover,
.blog-menu .current-menu-item a {
color: #fff;
text-decoration: none;
}
.blog-menu > .menu-item-has-children a,
.blog-menu > .page_item_has_children a { padding-right: 35px; }
.blog-menu > .menu-item-has-children::after,
.blog-menu > .page_item_has_children::after {
content: "";
display: block;
border: 5px solid transparent;
border-top-color: rgba( 255, 255, 255, 0.5 );
position: absolute;
z-index: 1001;
right: 17px;
top: 50%;
margin-top: -2px;
transition: border-color .2s ease-in-out;
}
.blog-menu > .menu-item-has-children:hover::after,
.blog-menu > .page_item_has_children:hover::after { border-top-color: #fff; }
.blog-menu li:hover a {
background-color: #1d1d1d;
cursor: pointer;
}
.blog-menu li:hover > a { color: #fff; }
/* Sub Menus --------------------------------- */
.blog-menu ul {
position: inline-block;
display: none;
z-index: 999;
text-align: center;
}
.blog-menu ul li {
float: none;
display: block;
}
.blog-menu ul > .menu-item-has-children::after,
.blog-menu ul > .page_item_has_children::after {
content: "";
display: block;
border: 6px solid transparent;
border-left-color: rgba(255,255,255,0.4);
position: absolute;
z-index: 1001;
right: 10px;
top: 50%;
margin-top: -5px;
}
.blog-menu ul > .menu-item-has-children:hover::after,
.blog-menu ul > .page_item_has_children:hover::after { border-left-color: #fff; }
.blog-menu ul li {
width: 240px;
background: #1d1d1d;
}
.blog-menu ul a {
padding: 20px 0px;
margin: 0 20px;
line-height: 130%;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.blog-menu ul > li:last-child a { border-bottom-width: 0; }
.blog-menu li:hover > ul {
opacity: 1;
left: 0;
display: block;
}
/* Deep down --------------------------------------- */
.blog-menu ul li:hover > ul {
top: 0;
left: 240px;
margin-left: 0;
}
Without you sending a url to inspect from I can't say for sure this will work but because the blog menu is using flex, try adding justify-content:center. So:
.blog-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin: 0 0 0 -20px;
}
Having trouble getting the submenu items under "LEARN" to wrap (Articles / Videos).
influentagency.com/clients/cgc_build_062117
I've pasted some of my SASS code, tried different things, but nothing seems to work. Added the wp_bootstrap_navwalker function, tried adding classes, does not wrap no matter what I try.
Any ideas what I'm missing here? Thanks in advance!
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
outline: 0;
background-color: #777;
}
.dropdown-menu {
flex-wrap: wrap;
}
.navbar{
border-radius: 0;
webkit-border-radius: 0;
min-height: 1px;
margin-bottom: 0;
&.navbar-default {
border: none;
background: #fff;
padding: 0 15px;
#navbar-menu{
float: right;
&.navbar-collapse{
padding: 0;
margin: 0;
.navbar-nav{
float: none;
margin: 0;
padding: 0;
li{
display: inline-block;
float: none;
margin: 23px 0 0 0px;
a {
color: #333;
font-size: 14px;
display: block;
text-decoration: none;
#include OpenSansSemiBold;
padding: 4px 8px;
&:hover{
color: #9dcb94;
}
}
&.item-right{
margin-left: 25px;
a{
background: $green;
color: #fff;
border-radius: 2px;
padding: 10px 14px;
&:hover{
background: $green_hover;
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: #fff;
}
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: $green;
}
}
.sub-menu{
display: none;
}
}
}
}
}
}
The issue is that your css is making all menu items display-inline, even ones in the dropdown menus:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav li{
display: inline-block;
/* other styles here also */
}
You need to include the following in your css to override that:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav .dropdown-menu li{
display:block;
}
To do this, you need to add the following to your SASS:
.navbar-nav{
[...]
li{
display: inline-block;
[...]
}
.dropdown-menu li { display:block;}
}
I have a side bar called column left. for some reason it does not go the full height of page when I have extra panels on view.
I use bootstrap with it as well with a fixed navbar at top.
Question: Why is it side bar "column left" not going full height what every page size is. What would be the best solution to solve it?
Codepen preview
Code View http://codepen.io/riwakawebsitedesigns/pen/bdaGro/
Full View http://codepen.io/riwakawebsitedesigns/full/bdaGro/
#import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);
/* Global */
body {
/*height: 100%;*/
margin: 0;
/*min-height: 100% !important;*/
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
padding-top: 70px;
width: 100%;
}
#user-bar-chart {
height: 300px;
}
#client-bar-chart {
height: 300px;
}
a,
a:hover,
a:focus {
cursor: pointer;
text-decoration: none;
}
tr:hover a.dashboard-user:after {
font-family: FontAwesome;
content: "\f044";
font-size: 14px;
}
/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
display: inline;
}
/* Layout */
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
#content {
padding-bottom: 40px;
transition: all 0.3s;
}
/* Column Left */
#column-left {
width: 50px;
min-height: 100% !important;
background-color: #515151;
position: absolute;
top: 0px;
padding-top: 100px;
z-index: 10;
transition: all 0.3s;
}
#column-left + #content {
margin-left: 50px;
}
#column-left + #content + #footer {
margin-left: 50px;
}
#media (max-width: 767px) {
#column-left {
overflow: hidden;
display: none;
}
#column-left + #content {
margin-left: 0;
}
#column-left + #content + #footer {
margin-left: 0;
}
}
/* Column Left Active */
#column-left.active {
width: 235px;
display: block;
}
#media (min-width: 768px) {
#column-left.active {
overflow: auto;
}
#column-left.active + #content {
margin-left: 235px;
}
#column-left.active + #content + #footer {
margin-left: 235px;
}
}
#media (max-width: 767px) {
#column-left.active + #content {
position: relative;
left: 235px;
}
#column-left.active + #content + #footer {
position: relative;
left: 235px;
}
}
#column-left.active {
width: 235px;
}
#column-left.active #menu li i {
font-size: 14px;
}
#column-left.active #menu > li > a > span {
display: inline;
}
#column-left.active #menu > li > ul {
position: relative;
left: auto;
top: auto;
width: auto;
visibility: visible;
}
/* Top Navbar */
.menu {
background: #eeeeee none repeat scroll 0 0;
}
.navbar {
background-color: #fff !important;
border: 0 none;
border-radius: 0;
color: #666;
margin-bottom: 0;
}
.navbar.navbar-shadow {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}
#button-menu {
display: inline-block;
cursor: pointer;
color: #6D6D6D;
}
#media (max-width: 640px) {
.navbar-brand {
font-size: 14px;
padding: 15px 7px;
}
}
/* Sidebar Menu */
#menu,
#menu ul,
#menu li {
padding: 0;
margin: 0;
min-height: 100%;
list-style: none;
}
#menu {
margin-bottom: 25px;
}
#menu > li {
position: relative;
}
#menu li a {
text-decoration: none;
display: block;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #515151;
}
#menu li a i {
font-size: 16px;
}
#menu > li > a {
color: #C4C4C4;
font-size: 14px;
padding-left: 13px;
border-bottom: 1px solid #585858;
}
#menu > li > a:hover {
background-color: #444444;
}
#menu > li > a > span {
display: none;
margin-left: 8px;
}
#menu li li a {
color: #9d9d9d;
}
#menu li li a:hover {
color: #FFFFFF;
background-color: #373737;
}
#menu li li a:before {
content: "\f101";
font-size: 14px;
font-family: FontAwesome;
margin-left: 10px;
margin-right: 10px;
transition: margin ease 0.5s;
}
#menu li li a:hover:before {
margin-right: 20px;
}
#menu > li.active > a {
color: #DDDDDD;
background: #373737;
}
#menu li.active li a {
color: #C4C4C4;
}
#menu li li.active > a:last-child {
color: #FFFFFF;
}
#menu li li.active a:last-child:before {
margin-left: 20px;
margin-right: 10px;
}
#menu > li > ul {
position: absolute;
left: 50px;
top: 0px;
width: 210px;
background-color: #444444;
visibility: hidden;
}
#menu li ul {
overflow: hidden;
}
#menu > li:hover > ul {
visibility: visible;
}
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
#menu li ul a {
padding-left: 20px;
}
#menu li li ul a {
padding-left: 40px;
}
#menu li li li ul a {
padding-left: 60px;
}
#menu li li li li ul a {
padding-left: 80px;
}
/* Panels */
.panel {
border-radius: 0px;
}
.panel .panel-heading {
position: relative;
}
.panel-heading h3 i {
margin-right: 8px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.panel-heading i {
font-size: 16px;
font-weight: 500;
}
.panel-heading h3 {
font-size: 16px;
font-weight: 500;
display: inline-block;
}
/* Primary Panel */
.panel-primary {
border: 1px solid #c3e4f6;
border-top: 2px solid #5cb7e7;
}
.panel-primary .panel-heading {
color: #1e91cf;
border-color: #96d0f0;
background: white;
}
/* Default Panel */
.panel-default {
border: 1px solid #e8e8e8;
border-top: 2px solid #bfbfbf;
}
.panel-default .panel-heading {
color: #595959;
border-color: #e8e8e8;
background: #fcfcfc;
}
/* Info Panel */
.panel-info {
border: 1px solid #e8e8e8;
border-top: 2px solid #3c8dbc;
}
.panel-info .panel-heading {
color: #595959;
border-color: #e8e8e8;
background: #fcfcfc;
}
I believe that adding 'position:fixed;' to your #column-left should do the trick.
In that case no matter how large/long your content is, the sidebar will always remain at 100% height of viewport, fixed at the left side of the screen.
div#column-left {
width: 50px;
min-height: 100% !important;
background-color: #515151;
position: fixed;
top: 0px;
padding-top: 100px;
z-index: 10;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
Set your body as position: relative if you want your left column to take the full height of your page. I would also explicitely set your column to take full height by removing your min-height and setting top: 0; bottom:0; on your column:
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
padding-top: 70px;
width: 100%;
position: relative;
}
#column-left {
width: 50px;
background-color: #515151;
position: absolute;
top: 0px;
bottom: 0px;
padding-top: 100px;
z-index: 10;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
It is actually 100% of the height of the viewport. (Not 100% of the page length).
What you can do:
#column-left { position: fixed; }
use display: table-cell on #column-left and #content
use flexbox (depending on if you have to support old browsers)
I'm not sure if it matters that it follows when you scroll the page, but you could make it position:fixed.
Perhaps that's an easy fix for you
I'm using Zurbs responsive framework foundation.
I decided I wanted the top bar to turn into a hamburger icon at a larger screen, because I have a lot of menu options and they push down to two lines when viewing the site on a medium sized screen such as a tablet.
So I found the media query where the size is being determined
#media only screen and (min-width: 40rem) {...}
I changed this to be 1025 pixels, and now it displays on screens that are 1025px and smaller. The issue is that the actual menu will not open or stay open when opened on smaller screens and made larger.
I think this has to do with a max-width set somewhere but the max-widths that I found in that media query aren't changing anything.
Here's the entire query
#media only screen and (min-width: 1024px) {
.top-bar {
background: #333333;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
height: 1.75rem;
top: 0.53125rem; }
.top-bar.expanded {
background: #333333; }
.contain-to-grid .top-bar {
/*max-width: 62.5rem;*/
margin: 0 auto;
margin-bottom: 0; }
.top-bar-section {
transition: none 0 0;
left: 0 !important; }
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline; }
.top-bar-section ul li {
float: left; }
.top-bar-section ul li .js-generated {
display: none; }
.top-bar-section li.hover > a:not(.button) {
background-color: #555555;
background: #333333;
color: #FFFFFF; }
.top-bar-section li:not(.has-form) a:not(.button) {
padding: 0 0.9375rem;
line-height: 2.8125rem;
background: #f68c3b; }
.top-bar-section li:not(.has-form) a:not(.button):hover {
background-color: #555555;
background: pink; }
.top-bar-section li.active:not(.has-form) a:not(.button) {
padding: 0 0.9375rem;
line-height: 2.8125rem;
color: #FFFFFF;
background: #008CBA; }
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
background: #0078a0;
color: #FFFFFF; }
.top-bar-section .has-dropdown > a {
padding-right: 2.1875rem !important; }
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 1.40625rem; }
.top-bar-section .has-dropdown.moved {
position: relative; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: block;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); }
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; }
.top-bar-section .has-dropdown > a:focus + .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; }
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -1px;
right: 5px;
line-height: 1.2; }
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%; }
.top-bar-section .dropdown li a {
color: #FFFFFF;
line-height: 2.8125rem;
white-space: nowrap;
padding: 12px 0.9375rem;
background: #333333; }
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
color: #FFFFFF;
background: #333333; }
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
color: #FFFFFF;
background-color: #555555;
background: #333333; }
.top-bar-section .dropdown li label {
white-space: nowrap;
background: #333333; }
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0; }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
border-bottom: none;
border-top: none;
border-right: solid 1px #4e4e4e;
clear: none;
height: 2.8125rem;
width: 0; }
.top-bar-section .has-form {
background: #333333;
padding: 0 0.9375rem;
height: 2.8125rem; }
.top-bar-section .right li .dropdown {
left: auto;
right: 0; }
.top-bar-section .right li .dropdown li .dropdown {
right: 100%; }
.top-bar-section .left li .dropdown {
right: auto;
left: 0; }
.top-bar-section .left li .dropdown li .dropdown {
left: 100%; }
.no-js .top-bar-section ul li:hover > a {
background-color: #555555;
background: #333333;
color: #FFFFFF; }
.no-js .top-bar-section ul li:active > a {
background: #008CBA;
color: #FFFFFF; }
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; }
.no-js .top-bar-section .has-dropdown > a:focus + .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; } }
You don't have to "hack" the Tob Bar css to display mobile layout on certain breakpoints. All you have to do is edit the existing Foundation settings css file.
So, for example, Top Bar has a set of available SCSS variables, and you can check them here - http://foundation.zurb.com/docs/components/topbar.html
The thing you are looking for is:
$topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
If you are using the CSS download only, you can change the top-bar breakpoint with CSS changes in 2 places. Here is a link to an answer posted
http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css
Currently I'm wordpressing a site that is using Bootstrap, and the .dropdown-menu is not appearing in IE8 (and, more importantly, IE9).
From my readings I discovered that there is a filter in navbar that causes this issue. Probably is neither the .navbar or the .dropdown class contain the filter. And I'm not even using the class .navbar, just .dropdown & dropdown-menu.
I would love some input on how to fix this. I'm using SCSS:
.header {
height:90px;
.brand {
height: 90px;
width: 246px;
background: url(../images/logo.png) no-repeat center;
display: block;
float: left;
}
nav {
padding-top:36px;
font-family:$tdSemibold;
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
& > ul {
& > li {
display: inline-block;
margin-left:40px;
z-index: 9999;
& > a {
color: white;
text-transform: uppercase;
font-size: 16px;
letter-spacing:1px;
display:block;
height:30px;
& > span.caret {
display: none;
}
&:hover {
color: #85c1eb;
text-shadow: -1px -1px 0 #{darken(#85c1eb, 40%)};
}
}
&.dropdown:hover > .dropdown-menu {
background: #fff;
z-index: 9999;
display: inline-block;
}
}
}
.dropdown-menu {
background: #fff !important;
border-radius: 0;
#include boxShadow(0 0 5px rgba(0,0,0,.15));
&:before {
content: " ";
display: block;
position: absolute;
top: -5px;
left: 5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid white;
z-index: 9999;
}
li {
border-bottom: 1px dashed #eee;
background: #fff;
z-index: 9999;
&:last-child {
border-bottom: none;
}
}
a {
padding: 8px 15px;
font-size: 14px;
color: $blue;
&:hover {
color:white;
}
}
}
}
}