I'm creating a theme for my wordpress. I'm trying to add a top menu, but the h1 is restricting the menu from being on the same line: I want them to be on the same line.
This is the HTML/PHP:
<header>
<h1 class='title'><?php the_title(); ?></h1>
<?php wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'topmenu'
)
);?>
</header>
And this is the CSS:
.title {
font-size: 1.5em;
font-weight: bold;
margin: 0;
}
header {
width: 100%;
padding: 25px;
padding-left: 20%;
padding-right: 20%;
}
.topmenu {
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
.topmenu li {
display: inline;
}
Thank you in advance!
Use this in your CSS
h1 {
display: inline-block;
}
Related
so I'm making a website in wordpress, and I keep struggling with the main menu. The menu does some things stated in the media queries, but leaves out other things. The hamburger menu button is shown, but I can't click it. I don't know how I can fix it.
This is the code from header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and
everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-
files/#template-partials
*
* #package epw_theme
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('style.css'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="hero">
<div class="fullwidthbar">
<h1 id="headertext"><a id="headertext" href="<?php echo esc_url( home_url(
'/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<nav id="site-navigation" class="main-navigation hdftbg" role="navigation">
<div class="ham">
<?php wp_nav_menu(array(
'theme_location' => 'menu-1',
'menu_id' => 'myTopnav',
'menu_class' => 'topnav'
)); ?>
<div class="test">
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">☰</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}</script>
</nav>
</div>
<div id="content" class="site-content">
</div>
And the css that goes with it:
/* Add a background color to the top navigation */
.topnav {
background-color: #1d1f20;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the color of links on hover */
.topnav a:hover {
color: #f77;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
color: #000000 !important;
}
.icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links. Show the
link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav {
width: 100%;
}
}
.test {
display: none;
}
/* The "responsive" class is added to the topnav with JavaScript when the
user
clicks on the icon. This class makes the topnav look good on small screens
(display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
z-index: 9999;
display: block;
}
.test {
display: block;
}
.topnav.responsive a.icon {
position: absolute;
right: 0 !important;
top: 0 !important;
}
.icon {
position: absolute;
top: 10px;
left: 10px;
z-index: 99999;
}
.menu-item {
width: 100% !important;
}
.superflex {
position: absolute !important;;
}
}
p.navigatie {
display: none;
}
ul {
float: right;
}
.ham {
background-color: #1D1F20;
width: 100%;
height: 3em;
}
#header{
margin-top: -55px;
width: 100%;
height: 100%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-2.jpg);
background-size: cover;
z-index: -100;
}
#header h3{
position: absolute;
margin-top: 300px;
}
#header h4{
position: absolute;
margin-top: 400px;
}
#arrowdown{
width: 150px;
position: absolute;
margin-top: 600px;
left: 50%;
transform: translate(-50%, -50%);
}
#headersec{
margin-top: -55px;
width: 100%;
height: 75%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-small.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#tagline{
font-style: italic;
font-size: 50px;
text-align: center;
color: white;
}
#lowerline{
font-style: italic;
font-size: 45px;
text-align: center;
color: #ccc;
}
html {
box-sizing: border-box;
height: 100%;
width: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.hero {
margin: 0 auto;
padding-top: 0px;
width: 100%;
}
.hero h1 {
margin-top: 0;
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hero {
color: #fff;
font-family: 'Raleway', sans-serif;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hdftbg{
width: 50%;
padding-left: 10px;
background-color: #1D1F20;
float: right;
z-index: 100;
margin-top: 0;
}
.fullwidthbar{
width: 100%;
background-color: #1D1F20;
height: 35px;
margin-bottom: -1px;
}
#headertext {
padding-top: 5px;
font-size: 18px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#headerfield {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.menu-items{
margin-top: -20px;
}
The .hdftbg, .fullwidthbar and .hero are all used for the clip path, which is why I can't remove them. Any idea how to fix this?
I am trying to make the site title of my header clickable and link back to the home page. (For example, google.com - if you click the google logo you go back to the google homepage.) I have added all of the correct code to my header.php but it still won't allow me to click the site title. Does anyone see any errors or have any solutions? Thanks in advance.
my header.php
<?php
/**
*
*
*
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="ht-page">
<header id="ht-masthead" class="ht-site-header">
<div class="ht-container ht-clearfix">
<div id="ht-site-branding">
<?php
if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) :
the_custom_logo();
else :
if ( is_front_page() ) : ?>
<h1 class="ht-site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="ht-site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif; ?>
<p class="ht-site-description"><?php bloginfo( 'description' ); ?></p>
<?php endif; ?>
</div><!-- .site-branding -->
<nav id="ht-site-navigation" class="ht-main-navigation">
<div class="toggle-bar"><span></span></div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container_class' => 'ht-menu ht-clearfix' ,
'menu_class' => 'ht-clearfix',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
) );
?>
</nav><!-- #ht-site-navigation -->
</div>
</header><!-- #ht-masthead -->
<div id="ht-content" class="ht-site-content ht-clearfix">
my css
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
#ht-masthead{
background: #FFF;
height: 70px;
border-bottom: 1px solid #eee;
z-index: 99;
transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
position: fixed;
text-align: center;
width: 0 auto;
margin-right: 38px;
width: 100%;
}
.ht-site-title{
font-family: 'futura_tbold';
font-size: 24px;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1;
margin-bottom: 8px;
margin-top:5px;
margin-left: 75px;
text-align: left;
float: left;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
}
.ht-site-title a{
text-decoration: none;
color: #000;
}
.ht-site-description{
color: #EEE;
margin: 0;
font-size: 15px;
font-style: italic;
line-height: 1;
}
.ht-site-description a{
color: #333;
}
/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
#ht-content {
padding-top: 200px;
}
.ht-section {
padding: 60px 0;
background: #FFF;
}
.ht-section-title-tagline {
margin-bottom: 60px;
text-align: center;
}
.ht-section-title {
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 36px;
width: 60%;
margin: 0 auto 15px;
}
.ht-section-title:last-child {
margin-bottom: 0;
}
.ht-section-tagline {
font-size: 20px;
width: 70%;
margin: 0 auto;
}
#ht-page {
width: 100% !important;
margin: 0 auto;
max-width: 100% !important;
overflow: hidden !important;
}
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#ht-site-navigation {
position: absolute;
width: 100%;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
float: right;
}
.ht-sticky #ht-site-navigation {
padding: 17px 0;
}
.ht-main-navigation .ht-menu {}
.ht-main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
position: relative;
}
.ht-main-navigation li {
float: left;
margin-left: 30px;
}
.ht-main-navigation a {
display: block;
text-decoration: none;
color: #000;
text-transform: uppercase;
font-size: 15px;
font-family: 'Raleway', sans-serif;
line-height: 36px;
padding: 0 15px;
font-weight: 600;
letter-spacing: 2px;
padding-bottom: 40px;
}
.ht-main-navigation ul ul {
position: absolute;
left: 0;
top: 100%;
background: #FFF;
min-width: 200px;
right:0;
z-index: 999;
padding: 8px;
margin-top: -21px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
height:300px;
transform: scaleY(0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
opacity: 0;
}
.ht-sticky .ht-main-navigation ul ul {
margin-top: 17px;
}
.ht-main-navigation ul ul ul {
left: 100%;
top: 0;
margin: 0 0 0 8px;
border-top: 0;
}
.ht-sticky .ht-main-navigation ul ul ul {
margin-top: 0;
}
.ht-main-navigation ul ul a {
text-transform: uppercase;
font-weight: 400;
color: #444;
line-height: 1.5;
padding: 7px 25px;
font-size: 12px;
text-align: left;
}
.ht-main-navigation ul ul li:first-child {
padding-top: 15px;
}
.ht-main-navigation ul ul li {
float: none;
margin: 0 0 5px;
}
.ht-main-navigation ul ul li:last-child {
margin-bottom: 0;
}
.ht-main-navigation ul li:hover > ul {
opacity: 1;
transform: scaleY(1);
}
.page-template-home-template .ht-main-navigation .current_page_item > a,
.page-template-home-template .ht-main-navigation .current-menu-item > a,
.page-template-home-template .ht-main-navigation .current_page_ancestor > a,
.home.blog .ht-main-navigation .current_page_item > a,
.home.blog .ht-main-navigation .current-menu-item > a,
.home.blog .ht-main-navigation .current_page_ancestor > a {
background: none;
color: inherit;
}
.ht-main-navigation li:hover > a,
.page-template-home-template .ht-main-navigation li:hover > a,
.home.blog .ht-main-navigation li:hover > a,
.ht-main-navigation .current_page_item > a,
.ht-main-navigation .current-menu-item > a,
.ht-main-navigation .current_page_ancestor > a,
.page-template-home-template .ht-main-navigation .current > a,
.home.blog .ht-main-navigation .current > a {
color: #000;
text-decoration: none;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 15px;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
I'm not sure if you mean clicking the title of the tab or making the header tag clickable.
If you mean making the header tag clickable, then try the following snippet:
header {
background-color: red;
height: 50px;
width: 100%;
cursor: pointer;
}
<header onclick="alert('Clicked')"></header>
If you want to make the title of tab clickable, you're out of luck.
It's impossible.
If you want a text link, use a href, if you want an image link, put img tag in a tag
* {
padding-bottom: 10px;
}
Google!
<a href="https://google.com">
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
</a>
Note: Links wont work in here because of the snippet thingy
I am making my first steps learning to code. I made some courses of html, php, css, javascript and MySql. Now I decided to continue learning from the practice while I build a Wordpress child theme.
The thing is that I'm trying to learn how to overlay two different font families in the same div. I mean something like this:
I discover that it's something possible to do with css using content: attr(data-title);
For example:
.button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: transparent;
display: inline-block;
height: 42px;
padding: 0 1.5em;
position: relative;
border: none;
outline: 0;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 40px;
line-height: 44px;
color: #000000;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.button:after {
content: attr(data-title);
z-index: 1;
font-size: 30px;
color: #f00;
font-weight: 100;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet">
ABC
Now my big problem is that I'm working with Wordpress and the php is a little more complex. What I would like to do is to have two different fonts for each menu item. For example:
This is the code php of my menu:
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
<?php endif; ?>
And this is the css:
.main-navigation {
font-family: pcablack;
font-size: 30px;
word-spacing: -5px;
/*position: relative;*/
position: absolute;
z-index: 1000;
padding-bottom: 20px;
margin-top: 48px;
margin-left: 40px;
}
I tried to make this but it doesn't work as I expect. It seems that maybe there is a syntax problem:
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>"
data-title= '
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>'
>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
<?php endif; ?>
then the css:
.main-navigation {
font-family: pcablack;
font-size: 30px;
word-spacing: -5px;
/*position: relative;*/
position: absolute;
z-index: 1000;
padding-bottom: 20px;
margin-top: 48px;
margin-left: 40px;
}
.main-navigation:after {
content: attr(data-title);
font-family: pcabold;
color: green;
font-size: 30px;
word-spacing: -5px;
/*position: relative;*/
position: absolute;
z-index: 1100;
padding-bottom: 20px;
margin-top: 48px;
margin-left: 40px;
}
It doesn't work. It only shows me console errors. Do you have some recommendation?
Maybe there is an easiest way to duplicate the font of a menu item and overlay it?
Other problem is that my menu is an accordion menu. So if I open a section of one of the menus that I duplicate the other menu should be automatically open too.
OMG, you doing this wrong.
You need copy only menu items titles to data attribute. SO for example:
$('.main-menu ul a').each(function() {
var text = $(this).html();
$(this).attr('data-title', text);
});
.main-menu li a {
position:relative;
font-family: "Arial Black";
font-size: 15px;
}
.main-menu li a:after {
content: attr(data-title);
position:absolute;
font-family: "Arial Black";
display:block;
font-size: 14px;
z-index:1;
left:0;
top:0;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-menu">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Why</li>
<li>Contacts</li>
</ul>
</nav>
I was hoping to find out how zazzle.com does their hover effect. I want to make an effect like that using pure CSS. I don't need the dropdown just the whole background of my element to change color.
CSS
/* the styles for the HTML elements */
html {
background: repeating-linear-gradient(#f3f3f3 0%,transparent 15%, transparent 90%,#000000 100% ),
url("../Images/bg.jpg") center center no-repeat;
background-size: cover;
height:135%;
}
body {
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
footer{
clear: both;
margin-top: 1em;
padding-right: 1em;
border-top: 2px solid rgb(119, 75, 77);
}
footer p {
text-align: right;
font-size: 80%;
margin: 1em 0;
}
header{
width: 100%;
overflow: hidden;
height: 60px;
line-height: 60px;
position: relative;
background-color: #3a3a3a;
margin: 0;
}
#headerLeft{
width:50%;
float:left;
padding:0;
margin: 0;
}
#headerRight{
width: 50%;
float:left;
text-align: right;
padding:0;
margin: 0
}
li{
display: inline;
}
nav li:hover{
background-color: #ffffff;
}
.floatRight{
}
nav li{
margin: 0;
padding-bottom: .25em;
display: inline;
}
textarea {
width: 25em;
margin-bottom: .5em;
}
table {
border-collapse: collapse;
}
td, th {
margin: 0;
padding: .15em 0;
}
br {
clear: both;
}
/* the styles for the div tags that divide the page into sections */
#content {
float: left;
width: 580px;
padding-bottom: 1.5em;
}
#left_column {
float: left;
width: 150px;
padding-left: .5em;
}
#right_column {
float: left;
width: 300px;
padding-left: 1em;
}
#wrapper{
background-color: #ffffff;
opacity: .6;
margin: 0 auto;
padding: .5em 2em;
}
/********************************************************************
* styles for the classes
********************************************************************/
.right {
text-align: right;
}
.left {
text-align: left;
}
.cart_qty {
text-align: right;
width: 3em;
}
.button_form {
margin: 0;
padding: 0;
float: left;
}
.inline {
display: inline;
margin-left: .5em;
}
/********************************************************************
* Styles for the Product Manager application
********************************************************************/
#category_table form {
margin: 0;
}
#category_table td {
margin: 0;
padding: .15em .5em 0 0;
}
#add_category_form {
margin: 0;
}
#add_category_form input {
margin-right: .5em;
}
#add_admin_user_form label {
width: 8.5em;
}
#edit_and_delete_buttons {
margin-bottom: .5em;
}
#edit_and_delete_buttons form {
display: inline;
}
#image_manager input {
margin: .25em;
}
/********************************************************************
* Styles for the Product Catalog application
********************************************************************/
#product_image_column {
width: 8em;
text-align: center;
}
/*******************************************************************/
#add_to_cart_form {
margin: .25em;
}
#add_to_cart_form input {
float: none;
}
/*******************************************************************/
#cart {
margin: 0;
padding: 1em .25em;
border-collapse: collapse;
width: 100%;
}
#cart_header th {
border-bottom: 2px solid black;
}
#cart_footer td {
border-top: 2px solid black;
font-style: bold;
}
#cart td {
padding: .25em 0;
}
/*******************************************************************/
#login_form label {
width: 5em;
padding-right: 1em;
}
#login_form input[text] {
}
#payment_form label {
width: 8em;
padding-right: 1em;
}
#payment_form input[text] {
width: 5em;
margin: 0;
padding-right: 1em;
}
#add_category label {
text-align: left;
width: 3em;
}
#add_category input {
margin-right: .25em;
}
PHP PAGE
<?php
require_once('model/database.php');
require_once('model/category_db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- the head section -->
<head>
<title>Willie's Fishing Supply</title>
<link rel="stylesheet" type="text/css"
href="<?php echo $app_path ?>main.css" />
</head>
<!-- the body section -->
<body>
<header>
<ul>
<section id="headerLeft">
<li>
<a href="<?php echo $app_path; ?>">
<h1>Willie's Fishing Supply</h1>
</a>
</li>
</section>
<section id="headerRight">
<?php
// Check if user is logged in and
// display appropriate account links
$account_url = $app_path . 'account';
$logout_url = $account_url . '?action=logout';
if (isset($_SESSION['user'])) :
?>
<li>
My Account
</li>
<li>
Logout
</li>
<?php else: ?>
<li>
Login/Register
</li>
<?php endif; ?>
<li>
Cart
</li>
</section>
</ul>
</header>
<nav>
<ul><?php
$categories = get_categories();
foreach($categories as $category) :
$name = $category['categoryName'];
$id = $category['categoryID'];
$url = $app_path . 'catalog?category_id=' . $id;
?>
<li>
<a href="<?php echo $url; ?>">
<?php echo $name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<section id = "wrapper">
Try this css
.aj_R-departmentLinks > li:hover {
background: none repeat scroll 0 0 #FFFF00;
}
If you want to change background color on an element use the :hover selector
.element {
background-color: blue;
}
.element:hover {
background-color: red;
}
I have a navigation bar at following wordpress site: http://tarjom.ir/demo/pwp
I have two major issues with this navigation bar:
1- I can't vertically align it at the middle.
2- There is a div wrapper as the parent of the <ul> tag that I can't remove it. However I have already set 'container' => '', but it does not work.
<!-- Navigation bar-->
<div id='wp_nav_section' class='grid-100 black-gray-bg font-roya' style='min-height: 100px; display: block;height:100%;'>
<?php wp_nav_menu(array("container" => 'nav')); ?>
</div>
<!-- End of navigation bar. -->
Here is my wordpress navigation code:
Here is all my CSS related to the wordpress navigation:
.menu
{
height: 65px;
min-height: 60px;
padding: 0px;
text-align: right;
background-color: #111;
margin-bottom: 10px;
}
.menu ul
{
direction: rtl;
width: 70%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
height: auto;
padding-top: 0px;
}
.menu li
{
padding: 0px 0px;
display: inline-block;
}
.menu li a
{
color: white;
text-decoration: none;
display: block ;
height: 45px;
background-color: black;
border-right: 2px #333 solid;
padding: 16px 7% 3px 3%;
box-sizing: border-box;
width: 100px;
margin: 0px 0px;
font-size: 110%;
}
.menu li a:hover
{
background-color: #333;
border-right: 2px #F90 solid;
}
I need the <ul> tag to be centered vertically in the <div> wrapper.
Thanks in advanced.
Remove height from .menu{} class. this will solved your vertical align issue.
I would try this, if you haven't already:
<?php wp_nav_menu(
array (
'container' =>false,
'items_wrap' => '%3$s', //"%3$s" is the li list itself. See below for the default value.
) ); ?>
The default values for these two parameters are:
'container' => 'div',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
So I would make sure to define those the way you want them in your call to wp_nav_menu().
You can read more info on my post at http://icode4you.net/wordpress-tricks-customizing-the-output-of-wp_nav_menu/
To center the UL within a div, I would use this code:
<style>
div {
text-align:center;
}
ul {
display:inline-block;
}
</style>
Let me know if you would like any more information or help :)