How can I resize the header area in order to insert a bigger logo. The logo height is not adjusting properly. This is a specific theme. I will include the header code and the css code.
CSS:
/* =Navigation
----------------------------------------------- */
.site-content .site-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.site-content .nav-previous {
float: left;
width: 50%;
}
.site-content .nav-next {
float: right;
text-align: right;
width: 50%;
}
/* =top
----------------------------------------------- */
.topbar {
height:40px;
background:#302b29;
}
.top {
background:url(images/top.png) repeat-x;
height:117px;
}
.head {
background:url(images/head.png) center no-repeat;
height:117px;
}
.logo {
padding:5px 0px;
}
h1.site-title {
font-size:20px;
font-family: Arial,serif;
font-weight:bold;
color:#fff;
margin:15px 0px 5px 0px
}
h1.site-title a:link,h1.site-title a:visited {
color:#fff;
}
h2.site-description {
font-size:14px;
color: #eee;
}
/* Searchform */
#searchform {
width:260px;
float:right;
margin-top:8px;
}
#s {
width:180px;
padding:3px 5px;
background:#4C4645;
border:1px solid #5E5B5B;
color:#fff;
}
#searchsubmit {
padding:3px 10px;
background:#800404;
border:1px solid #A00C0C;
margin-left:5px;
box-shadow:none;
color:#fff;
text-shadow:1px 1px 0px #540404;
}
/* TOP-MENU */
#botmenu {
font-size: 14px;
}
#submenu {
margin: 30px 0px;
padding:0px 0px;
height:50px;
}
#submenu ul {
width: auto;
float:left;
list-style: none;
margin: 0;
padding: 0 10px;
}
#submenu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
color: #222;
font-weight:400;
}
#submenu li a {
color: #fff;
display: block;
margin: 0;
padding: 16px 10px 16px 10px;
text-decoration: none;
position: relative;
}
#submenu li a:hover, #submenu li a:active, #submenu .current_page_item a {
color: #fff;
}
#submenu li a.sf-with-ul {
padding-right: 10px;
}
#submenu li ul li a, #submenu li ul li a:link, #submenu li ul li a:visited,
#submenu li ul li ul li a, #submenu li ul li ul li a:link, #submenu li ul li ul li a:visited,
#submenu li ul li ul li ul li a, #submenu li ul li ul li ul li a:link, #submenu li ul li ul li ul li a:visited {
color: #eee;
width: 148px;
margin: 0;
padding: 10px 10px;
border-top:1px solid #403837;
position: relative;
font-weight:400;
}
#submenu ul li ul li:first-child a,#submenu ul li ul li ul li:first-child a,#submenu ul li ul li ul li ul li:first-child a {
border-top:none;
}
#submenu li ul li a:hover ,#submenu li ul li ul li a:hover ,#submenu li ul li ul li ul li a:hover {
color: #fff;
}
#submenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px 0px 0px 0px;
padding: 5px 5px;
background:#302B29;
border:1px solid #302B29;
}
#submenu li ul a {
width: 150px;
}
#submenu li ul a:hover, #submenu li ul a:active {
}
#submenu li ul ul {
margin: -49px 0 0 181px;
}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
left: -999em;
}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
left: auto;
}
#submenu li:hover, #submenu li.sfHover {
position: static;
}
/* Layout */
#primary, #secondary{
padding:50px 0px;
}
Header Code:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="topbar">
<div class="container_6">
</div>
</div>
<div class="top cf ">
<div class="container_6">
<div class="head cf">
<div class="logo grid_2">
<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>">
<img style="float: left;" src="linktomylogo/newlogo1.png" alt="" width="148" height="90" /> </a>
</h1>
<h2 class="site-description">
<?php bloginfo( 'description' ); ?>
</h2>
</div>
<div id="botmenu" class="grid_4">
<p><?php shailan_dropdown_menu( ); ?></p>
<?php wp_nav_menu( array( 'container_id' => 'submenu', 'theme_location' => 'primary','menu_id'=>'web2feel' ,'menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu' ) ); ?>
</div>
</div>
</div>
</div>
</header><!-- #masthead .site-header -->
<div id="main" class="site-main cf">
I have changed a few things but it messes up the site. The height of the image should be around 200 and not 90px.
Thanks
the logo is placed inside the div with the class of top, and the other with a class of head. I've modified their CSS slightly below.
.top{
background:url(images/top.png) repeat-x;
height:200px; /* Change the height here */
}
.head{
background:url(images/head.png) center no-repeat;
height:200; /* and here */
}
Related
I am trying to get the header of my site and the navigation on the same line. I want the header to be aligned left and the navigation to be centered. My code doesn't seem to be working, so I was wondering if anyone has any solutions? Thanks in advance.
an example of what I am trying to have it look like...
my header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!-- site-header -->
<header class="site-header">
<h1><?php bloginfo('name'); ?></h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
wp_nav_menu(array(
'menu' => 'Primary Menu Links',
'container_id' => 'cssmenu',
'walker' => new CSS_Menu_Walker()
));
?>
</nav>
</header>
</div>
my css
.site-header h1 {
margin: 0;
font-family: 'futura_tbold';
font-size: 24px;
text-align: left;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 20px;
position: fixed;
z-index: 10000;
}
/* Drop Down Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
}
#cssmenu {
height: 37px;
text-align: center;
margin-bottom:50px;
width: 0 auto;
margin-right:38px;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover
}
#cssmenu > ul {
}
#cssmenu > ul > li {
list-style: inside none;
position: relative;
display: inline-block;
}
#cssmenu > ul > li > a {
display: block;
position: relative;
padding: 12px 20px;
text-align: center;
text-decoration: none;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
color: #2f3847;
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
}
#cssmenu > ul > li > a:hover {
color:#8F1E3E;
}
#cssmenu > ul > li:first-child > a {
}
#cssmenu > ul > li > a:after {
content: '';
position: absolute;
}
#cssmenu ul li.has-sub:hover > a:after {
position: absolute;
top: 28px;
left: 11px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #3d0d1d;
border-left: 7px solid transparent;
border-bottom-color: rgba(61, 13, 29, 1);
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #3d0d1d transparent;
}
#cssmenu > ul > li.has-sub > a:before {
}
#cssmenu > ul > li.has-sub:hover > a:before {
}
#cssmenu ul li.has-sub:hover > a {
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
color: #8F1E3E;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 38px;
padding: 10px 0;
background: #490f20;
border-radius: 0px 0px 0px 0px;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none;
padding: 0;
margin: 0;
position: relative;
}
#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
color: #ffffff;
text-decoration: none;
text-align: left;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
line-height:25px;
}
#cssmenu ul ul a:hover {
color: #ffffff;
background-color:#8F1E3E;
}
#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}
Here you go buddy hope this helps
Jsfiddle
<div class="navigation">
<div class="container">
<div class="logo">
<!-- <img src="#" alt=""> -->
<span>LOGO</span>
</div>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
</div>
</div>
.navigation {
float: left;
width: 100%;
padding: 10px 0;
border-bottom: 2px solid black;
}
.container {
max-width: 90%;
margin: 0 auto;
position: relative;
}
.logo {
position: absolute;
top: 0;
left: 0;
}
nav ul {
margin: 0 auto;
text-align: center;
}
nav ul li {
display: inline-block;
}
I'm working on old Wordpress page created with myMag theme, and i after centering menu to fill whole menu space, i have troubles with drop down menu.
I'm new in CSS and maybe you could say where I did a mistake?
menu before:
menu after:
inspecting the drop down element shows this:
<ul class='children'>
<li class="page_item page-item-187">Progetti di formazione</li>
<li class="page_item page-item-183">Progetti di mobilità</li>
<li class="page_item page-item-185">Progetti pilota</li>
<li class="page_item page-item-168">Ricerche e studi</li>
</ul>
the css looks like this:
#navcontainer #navbar {
float:left;
height: 51px;
line-height:50px;
margin-left: -15px;
margin-top: 1px;
}
#navbar, #navbar ul {
margin:0;
padding:0;
width:900px;
list-style-type:none;
display: table;
position:relative;
line-height:50px;
z-index:5;
}
#navcontainer #navbar a {
height: 40px;
display:block;
padding:0 21px;
text-decoration:none;
text-align:center;
line-height:28px;
outline:none;
float: left;
z-index:35;
position:relative;
color: #FFF;
text-shadow:1px 1px 0 #515151;
font-weight: bold;
vertical-align: middle;
}
#navcontainer #navbar a:hover {
color: #CCC;
}
#navcontainer #navbar ul a {
line-height: 30px;
}
#navcontainer #navbar li {
z-index:20;
text-align: center;
display: table-cell;
font-size: 13px;
vertical-align: bottom;
}
#navcontainer #navbar li li {
border-left:none;
margin-top:0;
}
#navcontainer #navbar ul {
position:absolute;
display:none;
width:172px;
top:38px;
left:-1px;
background: #f5f5f5;
}
#navcontainer #navbar li ul a {
width:130px;
height:auto;
float:left;
text-align:left;
padding:0 21px;
color: #606060;
text-shadow: none;
}
#navcontainer #navbar ul ul {
top:auto;
}
#navcontainer #navbar li ul ul {
left:172px;
top: 0px;
}
#navcontainer #navbar li ul ul a {
border-left:1px solid #CCC;
}
#navcontainer #navbar ul {
border-top:none;
}
#navcontainer #navbar ul a, #navcontainer #navbar ul li {
background-color:#e7e7e7;
}
#navcontainer #navbar ul a:hover, #navcontainer #navbar ul a:focus {
color: #18649a;
}
#navcontainer #navbar li:hover ul ul, #navcontainer #navbar li:hover ul ul ul,#navcontainer #navbar li:hover ul ul ul ul {
display:none;
}
#navcontainer #navbar li:hover ul, #navcontainer #navbar li li:hover ul, #navcontainer #navbar li li li:hover ul, #navcontainer #navbar li li li li:hover ul {
display:block;
}
and php file that creates this menu looks like this:
<div id="navcontainer">
<div class="navigation">
<div class="wrapper">
<ul id="navbar">
<?php $exclude = $myOptions['pages_excl'];?>
<?php if(!$myOptions['pages_limit']) {
$limit = '10'; } else {
$limit = $myOptions['pages_limit'];
}
if($myOptions['pages_limit'] == '0') {
$limit = 0;
}
?>
<li>Home</li>
<?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit");?>
</ul>
</div>
</div>
</div>
You will need to set
ul ul{
width: 100px;/*or whatever you want for the drop downs width*/
}
ul ul li {
display: block;
}
As there is a width set in just one UL of 900px you can overwrite to ensure constraint. Adding the display block to the LI's causes then to display on top of each other as they take full width of parent up.
Can't find what is wrong with my menu. I want that when you hover a sub menu item background color would be only for submenu not for menu items. I tried everything here is menu css.
I tried #menu ul li a:hover but still affect menu items and sub items..... And I need only subitems.
#menu
{
list-style: none;
padding-right: 8%;
float: right;
padding-top: 3.5%;
clear: right;
text-indent: 10px;
}
#menu ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#menu ul a
{
display: block;
color: #FFF;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#menu ul li
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
#menu ul li.current-menu-item
{
}
#menu ul li:hover
{
}
#menu ul ul
{
display: none;
position: absolute;
top: 92%;
left: -64%;
padding: 0;
background-color: #4d4d4d;
}
#menu ul ul li
{
float: none;
width: 190px;
}
#menu ul ul a
{
line-height: 120%;
padding: 10px 15px;
}
#menu ul ul ul
{
top: 0;
left: 100%;
}
#menu ul li:hover > ul
{
display: block;
}
<?php
$args = array(
'theme_location' => 'pre_primary'
);
?>
<?php wp_nav_menu( $args); ?>
Use immediate child selector!
#menu > ul > li > a:hover
To style anchors in nested list use the following css selector:
#menu li ul li a:hover
It will affect only second level items.
This question already has answers here:
Centering a css dropdown menu
(2 answers)
Closed 8 years ago.
How can I center the menu/navigation in header?
PHP file looks like this
<div class="menu-and-contact-wrap">
<?php
$header_phone = get_option('theme_header_phone');
if( !empty($header_phone) ){
echo '<h2 class="contact-number"><i class="fa fa-phone"></i>'.$header_phone.' <span class="outer-strip"></span></h2>';
}
?>
<!-- Start Main Menu-->
<nav class="main-menu">
<?php
wp_nav_menu( array(
'theme_location' => 'main-menu',
'menu_class' => 'clearfix'
));
?>
</nav>
<!-- End Main Menu -->
</div>
And CSS file looks like this
.menu-and-contact-wrap {
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu {
margin-top: 42px;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu ul {
list-style: none;
margin: 0;
}
.main-menu ul li {
float: left;
position: relative;
}
.main-menu ul li.current-menu-ancestor > a, .main-menu ul li.current-menu-parent > a, .main-menu ul li.current-menu-item > a, .main-menu ul li.current_page_item > a, .main-menu ul li:hover > a {
color: white;
background-color: #ec894d;
}
.main-menu ul li a {
font-family:"Lato", Helvetica, Arial, sans-serif;
color: #afb4b5;
font-size: 14px;
display: block;
text-decoration: none;
padding: 14px 10px;
}
.main-menu ul li ul {
display: none;
background-color: #ec894d;
width: 220px;
padding: 0;
position: absolute;
top: 48px;
left: 0;
z-index: 888;
}
.main-menu ul li ul li {
float: none;
margin: 0;
}
.main-menu ul li ul li:hover > a {
background-color: #dc7d44;
}
.main-menu ul li ul li a {
font-size: 13px;
padding: 10px 10px 12px;
color: white;
}
.main-menu ul li ul li ul {
background-color: #dc7d44;
top: 0px;
left: 220px;
}
.main-menu ul li ul li ul li:hover > a {
background-color: #d0743d;
}
.main-menu .responsive-nav {
display: none;
margin: 0px auto;
width: 100%;
padding: 5px;
}
I tried to change them as you can see above in CSS, but without any success
In default they looked like this:
Menu-and-contact-wrap looked like this
position: absolute;
bottom: 0;
right: 0;
And Main-menu looked like this before
margin-top: 42px;
float: right;
Thank you!
There are a few ways. Here are two.
Set a non-100% width on .main-menu and then add margin: 0 auto
Remove the floats from .main-menu ul li, add display: inline-block to it and add text-align: center to .main-menu
How do I make the sub-navigation links in the default Twenty Twelve Wordpress theme display over the wrapper/container?
header.php:
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
style.css:
.site-content nav {
clear: both;
overflow: hidden;
}
.main-navigation .assistive-text:hover,
.main-navigation .assistive-text:active,
.main-navigation .assistive-text:focus {
background: #fff;
border: 2px solid #333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
clip: auto !important;
color: #000;
display: block;
font-size: 12px;
padding: 12px;
position: absolute;
top: 5px;
left: 5px;
z-index: 100000; /* Above WP toolbar */
}
.main-navigation {
text-align: center;
clear: both;
}
.main-navigation li {
font-size: 12px;
font-size: 0.8571428571rem;
}
.main-navigation a {color: #5e5e5e;}
.main-navigation a:hover {color: #21759b;}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {display: none;}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {display: inline-block;}
.menu-toggle {
margin: 16px 0;
margin: 1.1428571429rem 0;
}
.main-navigation ul.nav-menu.toggled-on li {margin-bottom: 16px;}
#media screen and (min-width: 600px) {
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: inline-block !important;
text-align: center;
width: 100%;
}
.main-navigation ul {text-indent: 0;}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
margin: 0 16px;
margin: 0 1.1428571429rem;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
padding: 12px 0;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {color: #89CBBF;}
.main-navigation li {
position: relative;
margin: 0;
}
.main-navigation li:hover {background: #ededed;}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.7857142857rem;
min-width: 180px;
min-width: 12.857142857rem;
white-space: normal;
margin: 0;
padding: 12px 5px;
-moz-hyphens: auto;
-o-hyphens: auto;
-ms-word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-all;
word-wrap: break-word;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #89CBBF;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #89CBBF;
font-weight: bold;
}
.menu-toggle {display: none;}
I think you shloud try removing the overflow: hidden from .site