Hi to everyone and many thanks to all who put out the effort to help me.
Here is my problem, and please bear with me as I'm relatively new to all of this.
I'm trying create a custom WordPress theme for the blog on my site, so that the look and feel of my blog and my site are seamless.
Right now my problem is the nav menu. I have vertical lines separating the nav links and I have been unable to find any examples that show how to do this, or something like it in WordPress and if it's possible can it be done without jQuery.
Here is my site for the visual; http://is-images.com/
If it helps, here is the html code for the menu and the css
<div id="HeaderNav">
<ul>
<li class="link">about</li>
<li class="navsep"> </li>
<li class="link">web</li>
<li class="navsep"> </li>
<li class="link">photo</li>
<li class="navsep"> </li>
<li class="link">blog</li>
<li class="navsep"> </li>
<li class="link">contact</li>
</ul>
</div>
CSS
#HeaderNav
{
display:block;
width:300px;
height:24px;
float:right;
margin-top:70px;
margin-right:37px;
}
#HeaderNav ul
{
position:relative;
display:block;
float:right;
}
#HeaderNav ul li
{
padding:0 4px;
display:block;
height:100%;
float:left;
margin:0 auto;
text-align:center;
}
#HeaderNav ul li.navsep
{
width:1px;
height:24px;
margin:0 7px;
padding:0;
background-color:#ffffff;
}
If anyone can help, in any way, I would greatly appreciate it.
Again, many thanks to all who put out the effort.
If you want to add vertical lines to separate your nav menu options on your wordpress theme you can do it with a few CSS rules. jQuery is not needed.
Here you go:
li.menu-item a {
border-right: 1px solid #fff;
padding-right: 5px;
padding-left: 5px;
}
they have just create an empty element after each menu:
<li class="navsep"> </li>
Then design it with css
#HeaderNav ul li.navsep
{
width:1px;
height:24px;
margin:0 7px;
padding:0;
background-color:#ffffff;
}
Related
I'm creating my first WordPress theme. It's a very simple one for a friend's website, who is a music producer. I'm creating the navigation menu. One of the items on the menu is listen. It's not an actual link. You hover over it and a submenu should appear. So I made Listen a custom link.
The problem is that the submenu doesn't appear. The Submenu has its own class. But I don't think WordPress is reading the CSS
Here is the CSS:
ul.sub-menu {
display: none;
position: absolute;
padding: 0px;
margin-left: -20px;
}
ul.sub-menu li {
display: block;
text-align: left;
background-color: grey;
}
ul.sub-menu li:hover {
background-color: #dae0e6;
}
ul.main_nav li:hover ul.sub-menu {
display: block;
}
Here is the HTML and php code in the header.php:
<nav>
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'main_nav'
);
wp_nav_menu( $defaults );
?>
<!--
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
-->
</nav>
Here is my approach:
I changed css so its shows menu sub menu with CSS.
JsFiddle Demo
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
<nav>
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
</nav>
In example above your menu is commented out. Also parent of ul.sub-menu should be positioned relative.
since you are new ... I think you should start by get general idea about the sub menu and style them in WordPress .
this Tut will help you
http://wproots.com/how-to-style-wordpress-menus-dropdowns/
also I will suggest other option for you .
start form other theme like wordpress deafult theme and edit it
start form starter theme like http://bootstrapwp.rachelbaker.me/
start from template
its hard to build theme from scratch if you are new ... step by step
please assign width to ul like
ul.sub-menu {
display: none;
}
and plaece
ul.main_nav li:hover ul.sub-menu {
display: block;
position: absolute;
padding: 0px;
margin-left: -20px;
top:0;
left:0;
width:800px;
}
just after it
I've ran into a problem using a custom WordPress menu that I can't seem to solve, so after doing a lot of searching the web & failing to fix this over the past few days, I've decided to see if anybody here on StackOverflow can help.
Please note: I would use a Walker function for this but I'm too far gone with the code right now and the way the design works I'm having to build the menu this way.
My snippet for my dropdown: http://pastebin.com/8Stfs90c (would post but it would crucify the screen).
I’m having trouble with the 3rd level of my dropdown menu. In this image: http://s13.postimg.org/lxhslt0lz/image.png you can see that there’s a <li></li> that I’ve highlighted (Pages, About Me, About Us). The structure is as follows
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
And these are fine, BUT when it goes to the third dropdown, it cuts of the <li> and leaves the rest of the Pages children and puts them into a separate container and not the <li> for Pages.
So it should work like so:
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
Right Sidebar (Parent: Pages)
Left Sidebar (Parent: Pages)
Our Process (Parent: Pages)
And all though it may look like this on the dropdown (visually), as you can see in the code it isn’t represented by this. I think the problem I’m having is the checks I’m doing for closing the </li> is wrong. I’ve had this problem for a few days and I just can't seem to fix it. I was going to post this on the WordPress based forum but it's more of a PHP error than anything else.
Here’s a quick screenshot of me hovering over the elements that should be in Pages: http://s23.postimg.org/ef4ame6m3/image.png - as you see they’re separated from the <li>.
To replicate this what I've done is just created a menu structure in WordPress and used the code that's in the snippet (basically I just pasted it into the index.php file) to show how it's being represented.
I really hope somebody can help with this as it has been driving me mad and put a holt on my project for the past few days.
Apologies for the links above, I would post them directly in (screenshots & code) but I didn't want to take away from the actual problem.
If somebody does manage to provide me with the solution I'd be more than happy to buy you a virtual coffee or two!
Out of curiosity, I could be missing the point, is there a reason why would not want to use wp_nav_menu() to handle all of this?
Ex below would output the correct structure for you to theme as your screenshot if applied in your context?
wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );
Thanks.
Had a quick look at the code, I suppose line 100-130 are dealing with the third dropdown. Actually whats happening is you already have an ol on line 105, then its again being called through the loop on line 122.
echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";
I think the problem is on line 128 you have to remove ol from the end and create a new condition just for this.
Sorry if i am not being of any help but its really hard to picture the whole code in mind without seeing it. If you are really stuck send the ftp details in chat and i can have a look.
Hi There try this css code to create multiple Nested menu create.
WP code for menu in header.php
<nav class="photoshoot-menu">
<?php wp_nav_menu(array('theme_location' => 'primary','container' => ' ')); ?>
</nav>
CSS Code Add in your style.
.photoshoot-menu {
float: right;
width: auto;
padding-left: 0px;
padding-right: 0px;
}
.photoshoot-menu ul {
padding-left: 0px;
margin: 0px;
}
.photoshoot-menu > ul li {
display: inline-block;
position: relative;
text-transform: uppercase;
margin: 3px 2px;
position: relative;
}
.photoshoot-menu > ul > li > a {
color: #212121;
display: inline-block;
padding: 8px 20px;
border: 1px solid #4f4f4f;
border-radius: 4px;
}
.photoshoot-menu > ul > li > a:hover,
.photoshoot-menu > ul > li > a:focus,
.photoshoot-menu > ul > li.current_page_item > a {
background-color: #343434;
color: #f45c06;
}
.photoshoot-menu ul ul {
border-radius: 4px;
border: 1px solid #4f4f4f;
background-color: rgba(38, 38, 38, 0.95);
opacity: 0;
position: absolute;
top: 42px;
width: 100%;
min-width: 170px;
z-index: 1;
visibility: hidden;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.photoshoot-menu ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.photoshoot-menu ul ul li {
width: 100%;
}
.photoshoot-menu ul ul li a {
display: inline-block;
line-height: 16px;
padding: 5px;
color: #FFF;
width: 100%;
}
.photoshoot-menu ul ul li a:hover,
.photoshoot-menu ul ul li a:focus {
color: #f45c06;
}
.photoshoot-menu ul ul ul {
left: 99%;
top: 0px;
}
<nav class="photoshoot-menu">
<ul class="menu" id="menu-all-pages">
<li>Home
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3
<ul>
<li>Lorem Ipsum
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sample Page
</li>
</ul>
</nav>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm just branching my way out into php as I want to have a central menu file that I can edit instead of having to change the code on 20+ pages each time I update it! However my php include does not seem to be working. I'm wondering if maybe my php file I'm trying to include is too complex or doesn't work how I'm thinking (my understanding is that the php include basically takes all the text within it (in this case the html) and replaces the php include line with it)? There is also some css that would format the html when it was actually in the webpage, and I'm wondering if that is what is breaking it? Code is below.
html:
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
php:
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
CSS
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #ffffff; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
/* border-top: 1px solid #6b727c; */
/* border-bottom: 1px solid #575f6a; */
position: relative;
}
nav ul ul li a {
padding: 0px 30px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #CCCCCC;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Apologies if this is a completely novice question.
My guess: Your "html" file is actually named something.html, which causes the webserver to not recognize it as PHP. Rename it into something.php.
To verify that this was the problem, check the source of your HTML page, you should see the literal PHP code displayed there.
Might be you misnamed any file. just follow the instruction and keep all files in the same folder
File-index.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">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My index page</title>
</head>
<body>
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
</body>
</html>
Menu file-menu.php
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
Menu css->menu.css
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
}
<div id="buttonstrip">
<?php include ('menubar.php');?>
</div>
This appears correct. Only thing to check is the path of your include file.
Make sure your menubar.php is indeed located on the same folder as your script that includes it.
Make sure there are no spelling errors also on file name.
Create a menu.php file and include this file in php page where you want to show menu.
To include menu file in php file use <?php include "menu.php"; ?>
Below code is for menu.php
<div class="menu">
<ul>
<li>Insert</li>
<li>Update</li>
<li>Delete</li>
<li>Display</li>
<li>GUI</li>
</ul>
</div>
My issue is that I have cart section of the website where it automatically picks 5 related products on the right side of the page. I added a bottom-border style so you can tell the difference between each product. The issue here is that there's 4 dividers, or border lines, whatever you wish to call it. However as you can see in the picture below, having the 4th divider is completely redundant since it's already the last item. My question is what code would be necessary to add to take off the last divider to this stylesheet. I only have 1 line of code for the add to cart bottom border since it repeats itself every time a new object is added, and the max is 5 items every time.
I was going to take a picture and upload it directly but apparently you need more points just to post a picture, so I uploaded a picture at imgur until I have enough points. Cheers.
Code:
HTML Page:
<div class="addToCart_bottomBorder"></div>
CSS Page:
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Reference pic:
Might have better results using border-top and removing it from the first child :)
IE8 and below, from memory, don't support last-child
.addToCart_bottomBorder li {
border-top: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:first-child {
border-top: none;
border-bottom: none;
}
and here is the html
<ul class="addToCart_bottomBorder">
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
</ul>
and a jsFiddle for good measure
edit
Updated code and added a fiddle.
You could use the CSS adjacent sibling selector (+).
Assuming your HTML looks like this:
<div class="addToCart_bottomBorder">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Last</li>
</ul>
</div>
Then the CSS would be:
.addToCart_bottomBorder {
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li+li {
border-top: #d9d9d9 1px solid;
}
Fiddle: http://jsfiddle.net/M8kN2/
Lets break this down, .addToCart_bottomBorder li:last-child,
.addToCart_bottomBorder This is the parent
li and this is the child
With the following selector you are targeting the li of your parent, .addToCart_bottomBorder, and then removing the border from the last li but since those styles are on the parent you are removing nothing from them.
Without more of your html and css it is hard to tell how you have it structured but this is how it should be structured.
<ul class="pickFive">
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
</ul>
With this css,
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.pickFive li:last-child {
border-bottom: none;
}
If you structure it like so the last child of the parent will have no border. Check this JSFIDDLE to see how it works.
Instead of this
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Do This
.addToCart_bottomBorder li:last-child {
border-bottom: #FFFFFF 0px solid;
}
that's how i do it anyways, and it works fine
I have a navigation bar that has been on a site for ages. It works great. Now, I'm trying to add a pull-down effect on one of the navigation items driven by CSS.
The idea is that when you mouse over the 'pull down menu' link below, you'll get a vertical list of additional menu options.
The problem is that when I mouse over the 'pull down menu' link below, the resulting pop down box throws off everything below it. The text line in the div container below it wraps, the banner ad gets shifted down and the page basically loses its form.
Is there a way to make it so that the drop down CSS box overlays over the existing page and doesn't shift all the elements below it?
My navigation row looks like this:
<ul id="navlist">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li style="float:right">Pull Down Menu
<ul>
<li>Option 1</li><br>
<li>Option 2</li><br>
<li>Option 3</li><br>
</ul>
</li>
</ul>
</div>
//below this I have some other stuff
<div align="center">Here is a line of text about 800 pixles wide</div>
<div align="center">A BANNNER AD GOES HERE</div>
<div align="center">THE BODY OF THE PAGE GOES HERE</div>
Then my CSS looks like this:
ul#navlist {
width: 980px; line-height: 2em;
list-style-type: none;
clear: both;}
ul#navlist li { display: inline; }
ul#navlist li a {float: center;}
ul#navlist li a:hover {color: #fff;}
ul#navlist ul {display: none;}
ul#navlist li:hover > ul {display: block;}
Although the CSS is fine, it is better to restructure it. It would have been better if you had provided a screenshot of the page with the issue. Okay, I have a solution with me. Check the below code, try restructuring the CSS and HTML this way, although the HTML is kind of same.
HTML
<ul class="nav">
<li>
Menu 1
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)
If you wish for the page to not shift down when you add additional content, you need to use position: absolute. Since there isn't an exact example here I can't give an exact example to show you what I mean.
Instead, here are resources that explain CSS positioning:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://www.impressivewebs.com/absolute-position-css/
Just a quick disclaimer - absolute positioning can be your best friend and worst enemy. Make sure you cross-browser test and know what it is you're trying to accomplish.
As long as your items are absolute positioned and given a top and left value, they will not affect page flow.