How can I adjust the height of the Font Awesome social icons at the top right of this page so that they sit in the middle of the black bar and not at the bottom? Adding padding-bottom: to .social raises them but also increases the depth of the black bar which I don't want. Adding padding-bottom elsewhere has no effect. Thank you!!
.social {
padding: 0;
margin: 0;
font-size: 0;
height: 28px;
}
.image-caption .social {
height: 33px;
padding:top: 10px;
}
.social li {
display: inline-block;
margin-right: 15px;
margin-left: 15px;
}
.footer .widget.single .social li {
margin: 0 3px
}
.text-center .social li {
margin: 0 2px
}
.social li a {
display: table
}
.social li a i {
text-align: center;
padding-top: 7px;
display: table-cell;
vertical-align: middle;
color: #aaa;
background: none;
border: 1px solid #aaa;
width: 28px;
height: 28px !important;
line-height: 1;
font-size: 13px;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
}
.social a:hover a:hover i {
background-color: #FFF
}
.social a:hover i {
color: #FFF
}
Related
I am making a website: Website. In the menubar I have an underline when a specifi menu is active, or you hover over the menu options.
I would like that there is some px space from the menu text to the underline. How is that possible?
I tried to set a border-bottom:1px solid white, but that does not do the trick for me.
It is the following CSS the underline is on:
.wpmega-black-white .wpmm-mega-wrapper > li:hover,
.wpmega-black-white .wpmm-mega-wrapper > li.current-menu-item {
text-decoration: underline;
margin-top: 0.8em;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
Edited
delete previous codes and modify your CSS as I wrote:
in your CSS files /css/style.css?ver=4.9.4 find and change these block of codes. please have a backup before modifinig
please note that you should not delete other parameters of elements, only change what I wrote.
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li > a {
padding: 20px 15px 10px 20px;
}
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li.current-menu-item a, .wp-megamenu-main-wrapper.wpmm-orientation-vertical ul.wpmm-mega-wrapper > li.current-menu-item a{
border-bottom: 2px solid #FFF;
}
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal.wpmm-askins-wrapper ul.wpmm-mega-wrapper > li.menu-item-has-children > a:after {
top: 60%;
}
add this to your own css file
.wp-mega-menu-link:hover {
border-bottom: 2px solid #FFF;
}
text-decoration does exactly what is says it does, underline the text...you can't move the location of that underline (yet). You would have to use a positioned pseudo-element on the inner span.
For example:
ul {
list-style: none;
background: #000;
}
li {
display: inline-block;
}
li>a {
color: white;
padding: 20px 15px 20px 20px;
position: relative;
display: block;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
overflow: visible;
font-family: "Work Sans", Helvetica, Arial, sans-serif;
text-transform: capitalize;
text-align: left;
text-decoration: none;
}
li>a span {
position: relative;
}
li>a span::after {
content: "";
position: absolute;
bottom: -10px;
/* adjust spacing here */
left: 0;
width: 0%;
height: 1px;
transition: width .3s ease;
background: transparent;
}
li>a.current-item span::after {
background: currentcolor;
width: 100%;
}
li>a:hover span::after {
width: 100%;
background: currentcolor;
}
<ul>
<li><span>MY TEXT HERE</span></li>
<li><span>MY NEW ITEM</span></li>
</ul>
This also means they can be animated.
I'm creating a mobile nav and I have drop down menu on the charactors tab, with a back button on top made of simply a list item with text. With the back button though width 100% doesn't seem to be working I have check the dev tools and its seems like its should be working, I need it to be acting like the rest of the list items and its seem be be acting like its an inline element why?
the back a button only appears on widths 400px or less
https://jsfiddle.net/6e62ge46/11/
header nav{
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
// background-color: rgba(255,165,0,.8);
}
nav ul {
list-style: none;
padding: 0;
}
.main-nav{
margin: 0;
width: 100%;
color: white;
font-family: arial;
font-weight: 600;
}
nav ul li{
text-align: center;
border: 1px solid white;
border-radius: 15px;
font-size: 1.2rem;
background-color:rgba(255,165,0,.8);
width: 100%;
}
.drop-menu-back{
display: none;
width: 100%;
}
a{
text-decoration: none;
}
nav a:visited, nav a,h1{
color: white;
}
.main-nav .current-page {
background-color: rgba(0,0,0,.5);
}
/****drop down menu****/
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu{
position: absolute;
visibility: hidden;
display: block;
top: 38px;
white-space: nowrap;
left: -2px;
background-color: rgba(255,165,0,.8);
border: 1px solid rgba(0,0,0,.02);
box-shadow: 5px 5px 5px 2px rgba(0,0,0,.3);
opacity: 0;
transition: opacity 300ms ease-in-out 0s;
z-index: 1;
}
.characters:hover .drop-menu{
visibility: visible;
opacity:1;
}
#media screen and (max-width: 400px) {
.drop-menu{
top:-50px;
width: 100%;
}
.drop-menu-back{
display: initial;
width: 100%;
}
}
I'm trying to have navigation menu items have underline effect when hovering. This is my current style.css code for the navigation menu.
What should I add to make it look something like this? Example: http://www.templatemonster.com/demo/54038.html .
This is my current nav bar code.
.navbar-nav .open .dropdown-menu{
display:block !important;
}
.navbar-default .navbar-nav > li > a {
color: #333;
border-bottom: 1px solid transparent;
padding: 0;
margin: 14px;
Try this..
HTML:
<ul>
<li>About</li>
</ul>
CSS:
body,html {
margin: 0;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
https://jsfiddle.net/y4hc9Lbv/
I just started learning html and css about 6 days ago. I do it for a hour a day and I'm having a lot of fun with it. I try to figure most of the issue I have on my own, but I've been having troubles finding resources to fix this problem.
#import url(http://fonts.googleapis.com/css?family=Merriweather);
*
{
text-decoration: none;
box-sizing: border-box;
}
body
{
background-color: #ff9900;
font-family: 'Merriweather', serif;
}
#page
{
margin: -8px;
}
#wrapper
{
/*margin: 1px;*/
}
h2>a
{
margin: -25px;
float: left;
background-color: #ffde00;
color: #097054;
padding: 20px;
}
h2>a:hover
{
color: #ffde00;
transition: .5s ease;
background-color: #6599ff;
}
.container
{
padding: 6px;
padding-right: 50px;
padding-left: 20px;
text-align: center;
background-color: #097054;
}
ul li
{
background-color: #ffde00;
display: inline;
margin: 0 auto;
padding: 10px;
color: #097054;
font-weight: 900;
font-size: 14pt;
}
ul li:hover
{
transition: .5s ease;
background-color: #097054;
border-color: #25C1BC;
color: #ffde00;
}
#p1
{
color: #097054;
height: 25em;
width: 25em;
background-color: #097054;
margin-left: 8px;
margin-top: 20px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
p
{
background-color: #ffde00;
padding: 20px;
margin-top: 8px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#p1:hover;
{
/*background-color: #000000;*/
}
p:hover
{
height: -75%;
width: -75%;
padding-bottom: 3.8em;
box-shadow: -5px -5px 0px 0px #097054;
margin-top: 3em;
color: #ffde00;
background-color: #6599ff;
font-weight: 600;
}
Essentially what happens is that my navbar will become extremely disorganized after resizing. This causes links to overlap and look really awful.
Thank you for your time and consideration.
http://jsfiddle.net/JZ9LZ/
Add this .container{white-space: nowrap;}
This question has been asked before Disable line breaks using CSS
There's no way to solve your problem with only html/css as your li elements's width is minimum.
You should decrease the text font-size calculating it on the windows width, but this can be made only with javascript
My advice is to leave this page as before (as I imagine that is only for fun) and when you have good html/css skills you can start studying jQuery <- Very important for the UI
I am having a hard time trying to center the navigation buttons on my website. I have searched and tried different options but havent found any success. Here is what my code looks like. PS - my code is from an elegant theme template.
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 3px solid #f7f7f7;
overflow: hidden;
}
#menu #main-menu {
float: none !important!;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav li {
float: left;
border-right: 1px dashed #dcdcdc;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav a, ul#mobile_menu a {
font-size: 12px;
color: #c6c6c6;
text-decoration: none;
text-transform: uppercase;
display: block;
height: 44px;
overflow: hidden;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
-o-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
#menu .nav a > span {
padding: 12px 14px 11px;
}
#menu .nav ul li a > span {
padding: 0;
}
#menu .nav ul li {
border: none;
}
#menu .nav ul a, ul#mobile_menu a {
padding: 14px 5px 14px 25px;
height: auto;
overflow: visible;
width: 195px;
}
#menu .nav ul a:hover, ul#mobile_menu a:hover {
background: #4b93ad;
text-decoration: none;
}
span.menu_slide {
color: #fff;
background: #549eb9;
}
ul#mobile_menu a {
display: block;
padding-left: 5px;
padding-right: 5px;
width: auto;
}
#menu .nav > li.current_page_item > a:hover {
background: none;
color: #c6c6c6;
}
Try #menu {margin: 0 auto;}
OR
#menu {
float: left;
text-align: center;
}
#menu ul {
display: inline-block;
}
If you provide a link I can look at it for you.