So in fooling around, I’m easily able to feature those things in a menu on the desktop version. But on the mobile version, it’s hard. If our visitors don’t press the hamburger menu, they don’t get what they want right away. I experimented with adding buttons to the sticky post — which always shows on mobile, of course — but I could tell I would spend a lot of time and not get a good result. (See my test post at https://excessmas.com/2011/05/25/test-post/ and you’ll see what I mean.)
So — I’m asking for advice on strategy rather than CSS right now, if you know what I mean. Should I work on making the Twenty Fifteen menu just the best it can be and hope visitors hit the hamburger? Or should I put those four links into the sticky top post and try to dress them up a bit? I like the idea of flat buttons but I can tell I’m out of my element trying to make them all work. Thanks in advance for your advice, Bill
]]>My CSS for adding the | in menus:
.menu li a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
.menu li:hover a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
.menu li:first-child a:before {content:’ ‘;}
.menu li:first-child.hover a:before {content:’ ‘; color: #ffffff; padding: 0px 10px 0px 10px;}
My current form of CSS for trying to take | out of submenus (although I have tried other things):
.sub-menu li:hover a:before {color: #ffffff; padding: 0px 10px 0px 10px; content:’ ‘; !important}
.sub-menu li:first-child a:before {content:’ ‘;}
.sub-menu li:first-child.hover a:before {content:’ ‘; color: #ffffff; padding: 0px 10px 0px 10px;}
My site is currently at a temporary location = jwebsites.co.uk/mrba (I’ve not put a complete link as I don’t want it indexed) – the problem can be seen on the “Get Involved” submenu.
My complete CSS code is:
[Excessive CSS moderated. please just post a link to your site instead.]
Many thanks if anyone can help.
<link href="https://www.foylecycling.net/p7pmm/p7PMMh02.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="https://www.foylecycling.net/p7pmm/p7PMMscripts.js"></script></head>then
[Code moderated as per the Forum Rules. Please use the pastebin]
This works if it is one level but not for drop down (if i change the depth to 2 the drop downs appear on the page constantly) I think i should be using the following line of code from the original twenty ten code but i’m not sure how to make it work for my external files
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
Can anyone help
]]>I’d like to have WP menus work the Quick Menus drop downs. What I need seems pretty simple, here it is:
This line in my theme:
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
Sends this to the browser:
<li class="page_item page-item-2"><a href="https://culinarytraveler.com/about/" title="About">About</a></li>
<li class="page_item page-item-7 current_page_item"><a href="https://culinarytraveler.com/portfolio/" title="Portfolio">Portfolio</a></li>
<ul>
<a href="https://culinarytraveler.com/portfolio-child/" title="Portfolio">Portfolio Child</a></li>
</ul>
<li class="page_item page-item-19"><a href="https://culinarytraveler.com/contact/" title="Contact">Contact</a></li>But I need the list to be output as <div>:
<div style="width:220px;">
<a href="https://culinarytraveler.com/about/" title="About">About</a>
<a href="https://culinarytraveler.com/portfolio/" title="Portfolio">Portfolio</a>
<div style="width:200px;">
<a href="https://culinarytraveler.com/portfolio-child/" title="Portfolio">Portfolio Child</a>
</div>
<a href="https://culinarytraveler.com/contact/" title="Contact">Contact</a>
</div>Where would I begin to look for this formatting? Is it different with each theme or is this WP coding?
thanks,
Tim
P.S. this is the first time I tried to enter code in this forum, if it doesn’t show right I’ll post this again.
]]>Never mind the links not working. I have an index.html construction page thrown up for now which is throwing off the links. The problem is, (surprise!) Internet Explorer not meshing well with my CSS dropdown menus. It works great in Firefox and fine in Safari, but oh no, not in IE.
I am aware in my css that I have some doubles of properties (ie #nav ul and ul.nav). I thought about taking them out but it just works in 2 of the 3 browsers and it says it’s complaint…but if it makes it easier to debug, I’ll probably combine them to make the code cleaner (if I need too).
So what I need is a solution to this without chopping up my code too much. I have it pretty lean and it’s compliant (minus a few warnings..), but I have no idea what do to. Can anyone help?
Thanks
CSS CODE BELOW
———————————-
/*
Theme Name: JR1
Theme URI: https://www.johnnyruth.com.wedodns.com/index2.php/ (TEMP)
Description: /">This theme was modded from another theme for a light use, minimalistic style for small boutiques, shops and personal use.
Version: 0.9
Author: Mark Bennett
Author URI:
This theme was modified/designed by Mark Bennettt.
*/
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#ffffff; color:#666; }
#wrap { width:800px; margin:10px auto; padding:0; }
#banner { width: 800px; height: 50px; padding:0; background: url('images/jrlogo_header.gif') no-repeat top; background-position: right; margin: 15px 0px; }
a:hover { text-decoration:none; color:#000; border:none; }
#box { background:#fff; width:800px; table-layout:fixed; margin:0 auto; padding:0; }
#top { /* This is the colour of the background the whole length of the search box line (from left to right) */ /* background:#f1efe7; */ height:26px; line-height:26px; margin:0 auto; padding:0 5px; }
#header { background:#666666; /* This is the height of the grey banner box */ height:125px; line-height:26px; margin:5px auto; padding:0 5px; text-align: right }
#header h1.blogtitle { font-family:Arial, Helvetica, sans-serif, Serif; color:#fff; font-size:30px; text-transform:uppercase; margin:0; padding:20px 0 0; text-align: right }
#header h1.blogtitle a:hover { text-decoration:none; color:#fff; border:none; }
p.description { color:#fff; font-size:12pt; margin:0; padding:0; }
.entry { background:#fff; line-height:19px; text-align:justify; overflow:hidden; margin:5px auto; padding:0 5px; }
.entry h2 { font-family: Arial, Helvetica, sans-serif; font-size:14px;font-weight:700; }
.entry a:hover { text-decoration:none; color:#000000; border:none; }
#tophome { width:250px; float:left; text-align:left; margin:0; padding:0; }
#tops { width:150px; float:right; text-align:right; margin:0; padding:2px 0 0; }
#searchform { height:26px; line-height:26px; float:right; margin:0; padding:0; }
#searchform #s { font-size:8pt; width:120px; margin-right:2px; }
#searchform #submit { font-size:8pt; }
input#s { color:#666; border:1px solid #cbcbcb; background:#fcfcfc; }
.alignright { float:right; }
.alignleft { float:left; }
blockquote { padding-left:20px; border-left:5px solid #ddd; margin:15px 30px 0 10px; }
blockquote cite { display:block; margin:5px 0 0; }
.comments h3 { font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; padding-top:10px; }
/* I'm not really sure about this line..It was from the last theme I modified by Bob. Sorry Bob : / */ /* .bobcomment :hover { background:#f8f8f3; } */
ol.commentlist { list-style:none; margin:0 0 1px; padding:0; }
ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
ol.commentlist li.commenthead { list-style:none; margin:0; }
ol.commentlist li.commenthead h2 { margin:0; }
textarea { color:#666; width:80%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }
#footer { height:26px; line-height:26px; clear:both; margin:0 auto; padding:0 5px; }
a:link,a:active,a:visited { text-decoration:none; color:#000; border:none; }
a:hover { text-decoration:none; color: #000000; }
#header h1.blogtitle a:link,#header h1.blogtitle a:active,#header h1.blogtitle a:visited { text-decoration:none; color:#fff; border:none; }
/* This line for links effects the body links */ .entry a:link,.entry a:active,.entry a:visited { text-decoration:none; color:#000; border:none; }
.entry a:hover { text-decoration:none; color:#666; border:none; }
/* I'm not really sure about this line..It was from the last theme I modified by Bob */ /* .end,.bobcomment { border-bottom:1px #eeede0 solid; } */
input#url,input#author,input#email { color:#666; width:50%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }
#nav { height:26px; line-height:26px; /* This is the line below the links */ /* border-bottom:1px #ccc solid; */ margin:0 ; padding:0; margin-left: -20px; list-style: none;
background: #ffffff; }
ul.nav { height:22px; line-height:22px; float:left; list-style:none; font-size:12px; font-weight:400; /* This makes the Links in the navigation uppercase if turned on */
/*text-transform:uppercase; */ margin:0; padding:3px 0 0; }
ul.nav li { float:left !important; list-style-type:none; margin:0; padding:0; }
ul.nav li a,ul.nav li a:link,ul.nav li a:visited { color:#000; float:left; display:block; padding:0 5px; }
ul.nav li a:hover,ul.nav li a:active { background:#fff; color:#000; text-decoration:none; }
ul.nav li.current_page_item a { text-decoration:underline; color:#000; /* background:#fff; */ }
ul.nav li ul { float:left; margin:0; padding:0; }
.navigation { display:block; text-align:center; margin-top:10px; margin-bottom:10px; }
/*menu */
#nav ul {
margin: auto;
padding: 0;
height: 1em;
background: #ffffff;
}
#toolbar form {
margin: 0;
padding: 0.1em 2em 0.1em 0em;
height: 1em;
}
#toolbar input {
margin: 1px;
}
/* This one below is for the hover color on the menu links. The one below it is the color of just the normal menu links without hover */
#nav a:hover { color: #666; }
#nav a {
display: block;
color: #000;
background: #fff;
text-decoration: none;
padding: 0.1em 2em;
}
#nav li {
float: left;
padding: 0;
border: 1px solid #fff;
border-width: 1px 0;
}
/* This code below is for the drop menu section text */
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 2em;
font-weight: normal;
margin: 25px; /* This one affects the vertical space it moves down from the parent link */
list-style: none;
}
#nav li li {
padding-right: 1em;
width: 13.4em;
border: 0px;
}
#nav li ul a {
width: 12em;
w\idth: 9em;
}
/* This one below is how far the sub menu of the sub menu comes off (how far horizontally from the left text) */
#nav li ul ul {
/* The below margin is written in CSS Shorthand. The first 0em is for vertical spacing, and the last one is for horiztonal */
margin: 0em 0 0 10em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
color:#000;
}
#nav li:hover, #nav li.sfhover {
color:#000;
}
/* end menu */