Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum 2.0 header logo
Tagged: Minimum header
- This topic has 2 replies, 2 voices, and was last updated 10 years, 4 months ago by richardmartin.
-
AuthorPosts
-
December 7, 2013 at 10:38 am #77548richardmartinMember
Hi everyone:
I used Minimum 2.0 for a client.
I placed his logo in the header. However, this created two issues:
There is a 2nd menu in the top right hand part of the header area (a custom menu placed in the Header Right widget). When I enlarge the page on a browser, the 2nd menu disappears. What is happening here and how do I fix?
I would like the logo/header to float to the center when the browser screen is reduced (or mobile browser is used). The header/logo stays left justified. How do I make it float?
Here is the css code for that area:
/* Header
------------------------------------------------------------ */#header {
background-position: top center!important;
margin: 0 auto;
min-height: 50px;
overflow: hidden;
width: 220px;
}#title-area {
float: left;
overflow: hidden;
width: 35%;
}#title {
font-family: 'Open Sans', sans-serif;
font-size: 28px;
font-weight: normal;
line-height: 1;
margin: 15px 0 10px;
text-transform: lowercase;
}#title a,
#title a:hover {
color: #3e3e3e;
text-decoration: none;
}#description {
display: none;
}#header .widget-area {
float: right;
width: 50%;
}/* Image Header - Partial Width
------------------------------------------------------------ */.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 50px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 400px;
}.header-image #description {
display: block;
overflow: hidden;
}/* Image Header - Full Width
------------------------------------------------------------ */.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
width: 100%;
}/* Header / Primary / Secondary Navigation
------------------------------------------------------------ */#nav,
#subnav {
background-color: #f5f5f5;
border-top: 1px solid #e4e4e4;
}.menu-primary,
.menu-secondary,
#header .menu {
clear: both;
color: #3e3e3e;
font-size: 13px;
margin: 0 auto;
overflow: hidden;
width: 100%;
}#header .menu {
float: right;
width: auto;
}.menu-primary ul,
.menu-secondary ul,
#header .menu ul {
float: left;
width: 100%;
}.menu-primary li,
.menu-secondary li,
#header .menu li {
float: left;
list-style-type: none;
}.menu-primary a,
.menu-secondary a,
#header .menu a {
color: #3e3e3e;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary li:hover a,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary li:hover a,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu li:hover a,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
background-color: #fff;
color: #bf1616;
}.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
background: none;
background-color: #fff;
border: 1px solid #e4e4e4;
border-top: none;
color: #3e3e3e;
font-size: 12px;
padding: 10px;
position: relative;
text-transform: none;
width: 163px;
}.menu-primary li li a:active,
.menu-primary li li a:hover,
.menu-secondary li li a:active,
.menu-secondary li li a:hover,
#header .menu li li a:active,
#header .menu li li a:hover {
background-color: #fff;
color: #bf1616;
}.menu-primary li ul,
.menu-secondary li ul,
#header .menu li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 185px;
z-index: 9999;
}.menu-primary li ul a,
.menu-secondary li ul a,
#header .menu li ul a {
width: 175px;
}.menu-primary li ul ul,
.menu-secondary li ul ul,
#header .menu li ul ul {
margin: -39px 0 0 184px;
}.menu li:hover ul ul,
.menu li.sfHover ul ul {
left: -9999px;
}.menu li:hover,
.menu li.sfHover {
position: static;
}ul.menu li:hover>ul,
ul.menu li.sfHover ul,
#header .menu li:hover>ul,
#header .menu li.sfHover ul {
left: auto;
}.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
position: absolute;
text-indent: -9999px;
}#wpadminbar li:hover ul ul {
http://www.hughmorgan.net
left: 0;
}December 7, 2013 at 11:28 am #77554David ChuParticipantMy good man, just an FYI, don't paste tons of code here. It will annoy people, trust me! ๐ A link and detailed description will do.
Now the good news, I found the smoking gun. But you'll have to make a bunch of CSS nips and tucks to get what you want. I will give you a head start. Look at the width on this code. It makes the entire header squeeze into a tiny space. Looks like you played with that to center the image. Of course, with it being that narrow, no way the menu can fit in a tiny box.
#header { background-position: center top !important; margin: 0 auto; min-height: 50px; overflow: hidden; width: 220px; }
I assume that the responsive code is re-setting the header with to 100% or what-have-you at smaller sizes, thus suddenly revealing the menu.
Good luck,
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
December 7, 2013 at 11:34 am #77555richardmartinMemberHi David:
My apologies regarding the lengthy posting. I am not familiar with the etiquette. I am now. Thank you.
I will play with the header width to determine the optimal size. And you are correct, I did reduce it when I was first playing with the placement.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.