It is a wordpress site and this is from my style.css :
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu li { position: relative }
.sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; }
.sf-menu > li { float: left }
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block }
.sf-menu a { display: block; position: relative; }
.sf-menu ul ul { top: 0; left: 100%; }
.sf-arrows .sf-with-ul:after { content: "\f347"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 12px/16px 'dashicons'; vertical-align: top; margin: 5px 0px 0 4px; }
.sf-arrows ul .sf-with-ul:after { content: "\f345"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 12px/22px 'dashicons'; float: right; vertical-align: top; margin: 2px 0 0 4px; }
.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: white }
.navbar-toggle { display: none; position: absolute; left: auto; top: 5px; padding: 14px 13px; border-radius: 2px; background: rgba(0, 0, 0, 0.33); }
.navbar-toggle .icon-bar { display: block; width: 25px; height: 2px; border-radius: 1px; background: #fff; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px }
the menu block on the site wont expand.(the menu block only appears when page is in moblie-view mode.)
how should i fix this ?
in this cases make sure you have installed the theme correctly.
that was the mistake i've made.
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;
}
How me doing dropdown menu for pages and child pages on wordpress 4.0, but wp_page_menu not working, wp_list_pages('title_li=') ?> show menu but not show child pages. please help?
Try this:
ul.menu { list-style: none outside none; padding: 0; margin: 0 10px; float: left; font-size: 13px;}
ul.menu li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; }
ul.menu li a { padding: 9px 5px; color: rgb(255, 255, 255); display: block; text-decoration: none; float: left; display: block;}
ul.menu li:hover { background: #A6CB1B; }
.current-cat { background: #8BBF47; }
ul.menu li span { width: 11px; height: 10px; float: left; background: url('/*url of your background or write color anme*/') -561px -78px no-repeat; margin: 11px 0 0 0;}
ul.menu li ul.children {z-index:99; list-style: none outside none; position: absolute; left: 0; top: 31px; background: none repeat scroll 0% 0% rgb(51, 51, 51); margin: 0; padding: 0; display: none; float: left; width: 170px; border-bottom: 1px solid #F8C92D;}
ul.menu li ul.children li { margin: 0; padding: 0; clear: both; width: 170px; border-top: 1px solid #F8C92D;}
html ul.menu li ul.children li a { float: left; width: 145px; background: url('images/narga-sprites.png') -578px -162px no-repeat #A6CB1B; padding-left: 20px; }
html ul.menu li ul.children li a:hover { background: url('/*url of your background or write color anme same as above*/') -578px -162px no-repeat #7BAF36; }
NOTE: This code is untested.Make sure to do necessary changes as per your needs.
My CSS Menu pops the browser's horizontal scroll bar on and off as I hover over menu items. I've tried various combinations of css to deal with overflow using;
overflow-x:hidden;
and
overflow-y: auto;
But these just cut off my drop down elements in the menu and puts in a scroll bar inside my menu.
Here's my source code for the menu:
/* Main Menu*/
#menu {
font-family: 'sharetech', sans-serif;
float: right;
height: auto;
font-size: 18px;
padding: 0;
margin: 14px 0 0 0;
}
#menu a {
display: block;
line-height: 1em;
text-decoration: none;
color: gray;
padding: 2px 10px;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul, #menu li {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul {
position: relative;
z-index: 597;
}
#menu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#menu ul li.hover,
#menu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#menu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#menu ul ul li {
float: none;
}
#menu ul ul ul {
border-top: 0 none;
top: 0;
left: auto;
right: -99.5%;
}
#menu ul li:hover > ul {
visibility: visible;
}
#menu ul ul {
bottom: 0;
left: 0;
margin-top: 0;
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#menu ul ul a{
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 10px 10px;
}
#menu ul ul li {
font-weight: normal;
position: relative
}
#menu > ul > li > a {
line-height: 48px;
}
#menu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#menu ul ul li:hover > a {
background: #35a6ff;
}
#menu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#menu ul ul li:last-child:hover > a {
border-radius: 0 0 0 3px;
}
#menu ul ul li.has-sub > a:after {
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#menu ul li:hover > a, #menu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#menu ul li.has-sub > a:after {
margin-left: 5px;
}
#menu ul li.last ul {
left: auto;
right: 0;
}
#menu ul li.last ul ul {
left: auto;
right: 99.5%;
}
You were right Nix, it was in the pseudo classes. I figured it was, here's what was missing;
#fmenu ul ul li {
float: none;
width: 190px; <----set width
}
I defined a set width here and it solved the problem.
I'm working on a css/html site and I have this problem: in my style.css I got two divs, one for sidebar and one for content. I would like the sidebar to be, well, at the side, but when both are present the content always goes below the sidebar, unless I put that in position:absolute. In that case I have a problem when small screens are used, 'cause they get one over the other.
I paste the code, hope you can help!
/* This is for content */
article, aside, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#modal {
position: relative;
width: 100%;
display: inline-block;
display: table;
display: table-cell;
float: none;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
text align: center;
background-color: #f2f2f2;
overflow: auto;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #323232;
text-align: center;
}
#modal section {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 175%;
color: #333;
text-align: center;
}
while this is the sidebar
/*sidebar */
#sidebar{
position: static;
margin-top: 15px;
max-width: 150px;
}
#sidebar ul,
#sidebar ul li,
#sidebar ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
top: 5%;
}
#sidebar ul {
position: static;
top: 90px;
z-index: 1000;
}
#sidebar ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#sidebar ul li.hover,
#sidebar ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#sidebar ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#sidebar ul ul li {
float: none;
}
#sidebar ul ul ul {
top: 1px;
left: 99%;
}
#sidebar ul li:hover > ul {
visibility: visible;
}
#sidebar ul li {
float: none;
}
#sidebar ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#sidebar {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 180px;
}
#sidebar ul a,
#sidebar ul a:link,
#sidebar ul a:visited {
display: block;
color: #000000;
text-decoration: none;
font-weight: 300;
}
#sidebar > ul {
float: none;
}
#sidebar ul {
background: #a0a0a0;
}
#sidebar > ul > li {
border-left: 3px solid #000000;
}
#sidebar > ul > li > a {
padding: 10px 20px;
}
#sidebar > ul > li:hover {
border-left: 3px solid #9b1a1c;
}
#sidebar ul li:hover > a {
color: #9b1a1c;
}
#sidebar > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#sidebar ul ul a:link,
#sidebar ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#sidebar ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#sidebar ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul ul li {
padding: 0 20px;
background: #fff;
}
#sidebar ul ul li:last-child {
border-bottom: 3px solid #000000;
padding-bottom: 10px;
}
#sidebar ul ul li:first-child {
padding-top: 10px;
}
#sidebar ul ul li:last-child > a {
border-bottom: none;
}
#sidebar ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
I am looking to use navigation pills on my website, but they are resulting in a background leak. See the effect on this website: http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitableview-by-date/. Hover over the pills multiple times to see the issue. You can see the outline of the pills appear.
Here is the code that I tried:
.navigation-main {
border-top: 1px solid rgba(0,0,0,0.1);
padding-top: 5px;
clear: both;
display: block;
font: 700 13px/1.3076923076 Lato, sans-serif;
letter-spacing: .05em;
text-transform: uppercase;
width: 100%;
}
.navigation-main .menu {
max-width: 1272px;
margin: 0 auto;
}
.navigation-main ul {
list-style: none;
margin: 0;
padding-left: 0;
text-align: center;
}
.navigation-main li {
display: inline-block;
position: relative;
width: 100px;
}
.navigation-main li:after {
content: none;
display: block;
font-size: 11px;
margin-top: -4px;
vertical-align: middle;
}
.navigation-main li:last-child:after {
content: none;
}
.navigation-main a {
display: block;
line-height: 2.6153846153;
padding: 0 10px;
text-decoration: none;
white-space: nowrap;
}
.navigation-main ul ul {
background-color: #000;
display: none;
float: left;
position: absolute;
top: 2.6153846153em;
left: 0;
text-align: left;
z-index: 99999;
}
.navigation-main li li {
display: block;
}
.navigation-main li li:after {
content: "";
display: block;
margin: 0;
}
.navigation-main ul ul ul {
left: 100%;
top: 0;
}
.navigation-main ul ul a {
color: #fff;
line-height: 1.3076923076;
padding: .6153846153em 10px .6923076923em;
white-space: normal;
width: 170px;
}
.navigation-main ul ul a:hover {
background-color: #333;
color: #fff;
}
.navigation-main ul li:hover > ul {
display: block;
}
/* This is where the pill happens */
.navigation-main a:hover,
.navigation-main li.current_page_item > a,
.navigation-main li.current-menu-item > a {
border-radius: 4px;
color: #FFFFFF;
background-color: #000;
}
How do I stop the outline from appearing? Thanks!
Edit:
Code tried:
.navigation-main li {
display: inline-block;
position: relative;
border-radius: 6px;
width: 100px;
.navigation-main a:hover,
.navigation-main li.current_page_item > a,
.navigation-main li.current-menu-item > a {
border-radius: 4px;
color: #FFFFFF;
background-color: #000;
background-clip: padding-box;
}
Try adding this to your css:
background-clip: padding-box;
Add it to any item using border-radius.
Here is exactly what you need to write change for your example. Tried and verified.
body > header nav li a:hover {
color: white;
background-color: #0a6abf;
background-clip: padding-box;
}
with background-clip
without background-clip