I tried to add some social media icons to my header just now and they are about 10 times larger than they should be. I've gone through the css and used firebug and I can't find what is doing this.
I would like them to be their regular size and sit on the top right of the header. Thanks in advance!!
Here's what it looks like ( http://www.bolistylus.com ):
Here's the style.css:
a {
color: #254655;
}
ul, ol {
margin: 0 0 0 5.5em;
}
#page {
margin: 0 auto;
}
body{
background: #f3f3f3;
border-top: none;
border-top: 10px solid #666666;
}
#page {
margin: 0em auto;
width: 1000px;
}
.singular.page .hentry {
padding: 0.5em 0 0;
}
#branding{
background: #f3f3f3;
color: #000000;
border-top: none;
position: relative;
z-index: 2;
}
#site-title {
/*margin-right: 270px;*/
padding: 0.66em 0 0 0;
}
#site-title a {
color: #111111;
font-size: 60px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#branding h1, header#branding a{
text-align: left;
margin-right: 0;
}
#branding span{
text-align: center;
}
#branding img {
height: auto;
margin-bottom: -.66em;
width: 30%;
}
#branding .widget{
position: absolute;
top: 2em;
right: 7.6%;
}
#respond{ background: #E7DFD6; }
.welcome{
margin: 15px 60px;
background: #f3f3f3;
border: 1px solid #f6ff96;
padding: 15px;
text-align: center;
}
/* =Menu
-------------------------------------------------------------- */
/*.header_nav ul{
margin: 0;
padding: 0;
text-align: center;
width: 400px;
}
*/
#branding img .sm-img {
height: auto;
margin-bottom: -.66em;
width: 100%;
}
.header_nav {
background: #f3f3f3
}
.header_nav .head-nav {
border-bottom: 1px solid #cfcec9;
border-top: 1px solid #cfcec9;
margin-top: 30px;
padding-top: 5px;
padding-bottom: 5px;
text-align: right
}
.header_nav ul li{
display: inline;
}
.header_nav ul li a{
padding: 10.5px 21px;
color: #000000;
}
.header_nav ul li a:hover, .menu ul li .current{
color: #a8cb17;
text-decoration: none;
}
#access {
background: #f3f3f3; /* Show a solid color for older browsers */
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: center;
position: relative;
display: inline;
}
#access a {
}
#access ul ul {
}
#access ul ul ul {
}
#access ul ul a {
}
#access a:focus {
}
#access li:hover > a,
#access a:focus {
}
#access ul li:hover > ul {
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}
You're specifying a percentage width multiple times in your CSS, here are the lines:
style.css (line 70)
#branding img {
height: auto;
margin-bottom: -0.66em;
width: 30%; //remove
}
style.css (line 530)
#branding img {
height: auto;
margin-bottom: -7px;
width: 100%; //remove
}
Remove those and they should display ok.
Try to change your css here:
#branding img {
height: auto;
margin-bottom: -0.66em;
width: 3%; /* 3 not 30 */
}
In style.css line 70
Line 70 of your style.css is setting a width attribute with a value of 30%. This is causing your images to stretch to 30% of their container.
#branding img {
height: auto;
margin-bottom: -.66em;
width: 30%;
}
Adjust the width to a lower percentage or remove the line entirely.
Related
Since my site has multiple pages which are being designed by multiple people, we decided to create a standalone header. This is the code. While it was working initially, now after some tweaks, it's suddenly no longer responsive. As we use different CSS files, the CSS for this had to written inline, to avoid a clash with the others.
Here is the code, your help in helping me figure out the issue is much appreciated!
Header code (HMTL + Inline CSS):
---------------
<style>
body
{
background-color: #fff;
}
#nav
{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: fixed;
top: 0;
right: 1%;
z-index: 1030;
}
#nav > a
{
display: none;
}
#li-bg
{
border: 1px solid #fafafa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
#nav li
{
position: relative;
list-style:none;
-webkit-border-radius: 6px;
border-color: #333 1px solid;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background-color: transparent;
}
#nav li a
{
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #fff;
white-space: nowrap;
background-color: #fcfcfc;
}
#nav li a:active
{
background-color: #3498db!important;
}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #fff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul
{
height: 2.75em; /* 60 */
}
#nav > ul > li
{
height: 100%;
float: right;
width: 130px;
background-color: #3498db;
}
#nav > ul > li > a
{
height: 100%;
font-size: .95em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-decoration:none;
text-align: center;
background-color:transparent;
}
#nav > ul > li:not( :last-child ) > a
{
border-right: 1px solid transparent;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
}
/* second level */
#nav li ul
{
display: none;
position: absolute;
top: 100%;
padding-top: 8px;
padding-left:40px;
}
#nav li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul
{
left: -1px;
}
#nav li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #fcfcfc;
background-color:#3498db;
color: #fff;
font-size:.85em;
width:100px;
text-decoration: none;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
background-color: #2c81ba;
}
#media only screen and ( max-width: 62.5em ) /* 1000 */
{
#nav
{
width: 100%;
position: static;
margin: 0;
}
}
#media only screen and ( max-width: 40em ) /* 640 */
{
html
{
font-size: 75%; /* 12 */
}
#nav
{
position: relative;
top: auto;
left: auto;
}
#nav > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #3498db;
position: relative;
}
#nav > a:before,
#nav > a:after
{
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after
{
top: 60%;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
#nav > ul > li
{
width: 100%;
float: none;
}
#nav > ul > li > a
{
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a
{
border-right: none;
border-bottom: 1px solid #2c81ba;
font-size: 1em;
}
/* second level */
#nav li ul
{
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
</style>
<div style="width:100%; position:fixed;background-color:#f8f8f8;top:0;left:0;z-index:1000000; height:47px; font-size:14px!important; font-family: "Open Sans", Helvetica, Arial, sans-serif;">
<div>
<a href="http://www.example.com" style="
padding-left: 100px;
"><img src="http://www.example.com/images/logo.png" border="0"></a>
<nav id="nav" role="navigation" class="mainheader">
<ul class="clearfix">
<li><i class="fa fa-home"></i> Connect </li>
[var.loggedin; if [val] == '1'; then '<li> <span><img src=[var.userpic;htmlconv=no;noerr] class=userpicimg style="width: 40px;border: #446db2 solid 1px;border-radius: 10%;"> [var.userdetails.user_firstname;noerr]</span> <ul> <li>Dashboard</li> <li>Profile</li> <li>Help</li> <li>Logout</li></ul></li>'; else '<li> Log In </li><li>Sign Up</li>';noerr]
</ul>
</nav>
</div>
</div>
Did you add viewport meta tag to your HTML? if not try adding this
<meta name="viewport" content="width=device-width, initial-scale=1">
If it didn't work try adding this to your css as well.
#-ms-viewport{
width: device-width;
}
Hope this Helps :)
My website's menu drop down seems to malfunction and it is stuck on the screen. Don't know how to fix http://www.kingadlerhomedecor.com/store/
I want to add more sub categories to this drop-down, but I wish to avoid making the drop down list too lengthy. I thus want 2 rows here in the drop-down to adjust the length list of sub-categories, but it doesn't seems to happen, instead there is a new problem - The drop-down menu item is half stuck and I am unable to fix this.
I have not made any changes and yet it seems to malfunction. No clue how to fix the dropdown menu stuck on my screen. Please advice.
/* MENU */
.primary-define #menu {
text-align: left;
font-family: helvetica, Arial;
/*background-color: #999;*/
}
.primary-define #menu-inner {
position: relative;
font-family: helvetica, Arial;
background-color: #999; /*No color was added origninally - added to make it grey*/
}
.primary-define .mainmenu {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.primary-define .mainmenu li {
margin: 0;
padding: 0;
position: relative;
}
.primary-define .mainmenu > li {
float: left;
/*background-color: #999;*/
}
.primary-define .mainmenu li a {
color: #666; /*originial #666*/
display: block;
font-size: 10px; /*original 15px */
padding: 0.5px 1px; /*20px 25px */ /*Padding for the dropdown elements*/
text-decoration: none;
/*background-color: #999;*/
}
.primary-define .mainmenu > li > a {
color: #fff;
padding: 15px 25px; /*35px*/
font-size: 14px; /*original 18px */
font-weight: 600;
line-height: 100%;
font-family: helvetica, Arial;
}
.primary-define .mainmenu > li:hover > a,
.primary-define .mainmenu > li.active > a {
background-color: rgba(0, 0, 0, 1); /*rgba(0, 0, 0, 0.2)*/
/*font-size: 15px;*/
}
.primary-define .mainmenu li .dropdown-container {
top: 99%;
overflow: hidden;
position: absolute; /*absolute*/
padding-left: 1px; /*added by yuvi*/
font-size: 30px; /*added by yuvi*/
}
.primary-define .mainmenu li .dropdown {
margin-top: -300px; /*-999px*/
background-color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 30px; /*added by yuvi*/
padding: 10px;
}
.primary-define .mainmenu li:hover .dropdown {
margin-top: 0;
/*font-size: 30px; added by yuvi*/
}
}
.primary-define .mainmenu ul {
margin: 0;
float: left;
width: auto; /*249px*/
list-style-type: none;
border-right: 1px solid #eee;
}
.primary-define .mainmenu ul li:hover a,
.primary-define .mainmenu ul li.active a {
background-color: #eee; /*orginiarl #eee*/
margin-top has to be -380px.
.primary-define .mainmenu li .dropdown {
margin-top: -380px;
background-color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 30px;
padding: 10px;
}
I have a web page with a sticky header, sticky sidebar and sticky footer but can't get the content to be padded on the right(padding just gets ignored) and my in-page links don't work correctly. I want to do this with CSS ONLY.
http://jsfiddle.net/C7v9f/
I know there are many other similar questions but their solutions either don't work; their too old; they've never been answered; they use jQuery, JavaScript etc. or they fall apart after adding things like line-height or padding.
html, body {
height: 100%;
color: #fff;
}
body, p {
margin: 0;
padding: 0;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
background: #888;
}
#header {
height: 55px;
background: #222;
position: fixed;
width: 100%;
z-index: 4;
}
#SC-wrap {
float: left;
margin-bottom: 40px;
}
/* BEGIN HEADER NAV */
#nav {
padding-left: 32%;
}
#nav li{
position: relative;
display: inline;
color: white;
}
#nav a {
display: inline-block;
padding:10px;
}
#nav ul {
position: absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align: left;
text-decoration: none;
}
#nav ul li {
display: block;
}
#nav li:hover ul {
left:0;
}
#nav li:hover a {
text-decoration: none;
background: darkgrey;
}
#nav li:hover ul a {
text-decoration: none;
background: #B8B8B8;
}
#nav li:hover ul a:hover{
text-decoration: none;
background: #CCCCCC;
}
#nav ul a{
white-space: nowrap;
display: block;
border-bottom:1px solid #ccc;
color: white;
text-decoration: none;
}
#nav a {
text-decoration:none;
color: blue;
}
#nav a:hover {
text-decoration:none;
background: #f1f1f1;
color: blue;
}
/* END HEADER NAV */
#sidebar {
background-color: green;
width: 150px;
height: 100%;
position: fixed;
line-height: 2em;
font-size: 1.2em;
z-index: 2;
text-align: center;
padding-top: 6%;
overflow-y: auto;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
background-color: grey;
}
#content {
padding-right: 250px;
width: 100%;
padding-top: 100px;
font-size: 1.2em;
line-height: 1.6em;
z-index: 1;
text-align: left;
padding-left: 200px;
}
#footer {
position: fixed;
bottom: 0px;
height: 40px;
width: 100%;
background: #222;
z-index: 4;
}
The padding on the right is there, the content is just too wide. To make the padding not be included in the width of the element use box-sizing:border-box Demo
#content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
... Your other styles ...
}
When I set the width of the sub menu to width:auto, the items with really long names gets squished together. Currently I have the width set to 175% which is not desirable as some menus can get quiet long. How can I make width:auto work for long menu items.
Link to demo site: http://previewyournewwebsite.info/otsl/
.nav.main_nav .sub-menu {
background-color: #2D556F;
display: none;
height: auto;
/* left: -5px; */
left: 0px;
margin: 0 9px 0 0;
position: absolute;
top: 54px;
width: 175%;
}
.nav.main_nav .sub-menu li {
margin: 30px 0px;
display: block;
}
.nav.main_nav .sub-menu li a {
background-image: url("./images/sub-nav-divider.png");
background-position: 0 bottom;
height: 50px;
line-height: 50px;
background-repeat: repeat-x;
font-family: Helvetica,Arial,sans-serif;
font-size: 15px;
margin-left: -31px;
padding: 0 0 0 44px;
width: 100%;
}
.nav.main_nav .sub-menu > li{
height: 50px;
line-height: 50px;
padding-left: 44px;
}
.nav.main_nav .sub-menu > li:last-child a{
background-image: none;
}
.nav.main_nav .sub-menu li {
display: block;
margin: 0;
}
Link to site: http://previewyournewwebsite.info/otsl/
Are you looking for this?
http://jsfiddle.net/coma/MNFXB/11/
nav ul, nav li {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 1em;
color: #fff;
background-color: #2D556F;
white-space: nowrap;
}
nav > ul {
background-color: #2D556F;
}
nav > ul:after {
display: block;
content: "";
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav li:hover > a {
background-color: #92A132;
}
Or would you like something like this?
http://jsfiddle.net/coma/MNFXB/12/
i am trying to create a drop-down menu with rounded corners and have nearly got there but for a small issue in IE. If you view this link (http://ids-ind.com/koris/dropdown.html) in FF it looks and works fine but in IE the right hand side has a flat top.
Please can you advise what i need to do/change to get it looking like it does in FF?
Below is the CSS i am using
a:link {text-decoration:none;}
/* tabs
*************************/
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0 0 0 1px;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
background:url('../images/menuleft_bg.png') left bottom no-repeat;
line-height:55px;
width:130px;
}
ul.tabs a
{
position: relative;
display: block;
background:url('../images/menuright_bg.jpg') right bottom no-repeat;
}
/* dropdowns
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 130px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 100%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}
ul.dropdown li a
{
display: block;
}
/* menu-specifc
*************************/
#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
border-bottom: 0px solid #000;
}
#menu ul
{
margin: 0 auto;
}
#menu ul li h4
{
margin: 0;
}
#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}
#menu ul li a
{
color: #fff;
padding-left: 4px;
}
#menu ul li a img
{
vertical-align: middle;
}
#menu ul li a span
{
display: block;
padding: 0 20px;
text-align:center;
}
#menu ul.dropdown
{
padding: 20px 0;
background-image: url('../images/dropdownbg.png');
overflow:hidden;
border-bottom: 0px solid #dc902f;
width: 130px;
z-index:110;
}
#menu ul.dropdown li a
{
border-bottom: 0px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
background-image: url('../images/dropdownbg2.png');
}
#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}
#menu ul.dropdown li a:hover
{
color:#990000;
}
#menu ul li h4 a:hover
{
background-image: none;
}
remove the position:relative; in below
ul.tabs a{}