How to add dropdown menus in the Wordpress Cutline theme?
-
I've got a fan website for a cult US TV show (that also sells merchandise as an affiliate). The site's design is about five years old, and I should probably revamp it at some point: http://www.btvsonline.com/
Anyway, the site's Cutline theme (http://cutline.tubetorial.com/) does not support native headers, and the header menu shows only a text list of my top-level pages. There are many subpages below these pages, but it's hard for users to find them without going to different pages to try to find things. What I'm looking for: if someone hovers above "Store" in the menu, a dropdown menu showing all the product pages would appear.
I've tried to find Wordpress plugins or PHP hacks to add dropdown menus and I have gone through Cutline's support site, but I have had no luck. Anyone in the Moz community have any advice? Perhaps I just need to revamp the site with a new and modern Wordpress theme? Thanks in advance for any thoughts!
-
Hey, if I PayPal you $25 and give you my login details, could you modify the header.php file and get the dropdown menu to work? I'm sure it'd take just a few minutes. I don't know that much PHP.
My e-mail address is in my Moz profile -- feel free to e-mail there.
-
Ah, yeah then their isn't really anyway for you to get dropdown menus unless someone modifies your header.php to add them. My css would only have worked if cutline was using wordpress's built in menu function.
-
No, Cutline does not use that Menu function at all.
-
Thanks so much for taking the time to write that!
Unfortunately, I don't know exactly where to put it. I copied exactly what you wrote first at the bottom of this CSS file: http://www.btvsonline.com/wp-admin/theme-editor.php?file=style.css&theme=Cutline-1.4-3ColumnSplit (Stylesheet)
And then I placed the code here:
http://www.btvsonline.com/wp-admin/themes.php?page=editcss (CSS Stylesheet Editor)
After I tried both options, my horizontal menu doesn't provide any dropdown menus. Am I doing something wrong? Thanks SO much again!
-
It doesn't look the theme has been updated since 2011, so I don't imagine that it will be updated again, but a child theme would be best practice.
Samuel,
If it is using wordpress's built in menu editor I rewrote the css from the twentytwelve theme's menu to work with Cutline's theme. You should just be able to add this to the main css file. I don't think the theme will ever be updated again so I don't think that this will cause an issue.
/* Dropdown Menu */
ul#nav li {
position: relative;
}
ul#nav li ul {
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
ul#nav li ul ul {
top: 0;
left: 100%;
}
ul#nav li:hover > ul,
ul#nav li:focus > ul,
ul#nav .focus > ul {
border-left: 0;
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
ul#nav li ul li a {
background: #FFFFFF;
border-bottom: 1px solid #ededed;
display: block;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 7rem;
white-space: normal;
}
ul#nav li ul li a:hover,
ul#nav li ul li a:focus {
background: #e3e3e3;
color: #444;
}
ul#nav .current-menu-item > a,
ul#nav .current-menu-ancestor > a,
ul#nav .current_page_item > a,
ul#nav .current_page_ancestor > a {
color: #636363;
font-weight: bold;
}
ul#nav li ul li a {
padding: 5px;
margin: initial;
margin-top: 0px;
}
ul#nav li ul li {
padding: 0px 0 0 0;
text-align: left;
} -
My development skills aren't that hardcore, but it sounds like you would want to develop a child theme. If you're editing the actual theme, it's just going to get overwritten with the next theme update. But that sounds like a lot of trouble when you can probably find something that works for $50.
-
As far as I can tell Cutline's css doesn't include support for dropdown menus. Does Cutline's main menu use the wordpress menu editor under appearance > menu in the main dashboard?
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
What is the best way to add semantic linked data to WordPress?
As a recent Moz subscriber, I'm trying to up my game in terms of inbound marketing. One of the most pressing tasks is to add json-ld across all of my WordPress sites. What is the best way to do this? Should I use the technique set out here: https://moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags Or should I use one of these plugins? https://en-gb.wordpress.org/plugins/schema/ https://en-gb.wordpress.org/plugins/wp-structuring-markup/ I want to get this right so any guidance would be gratefully received.
Intermediate & Advanced SEO | | treb0r0 -
Best wordpress plugin for redirects, Old to new pages
What is the best wordpress plugin for redirects, Old to new pages?
Intermediate & Advanced SEO | | Michael.Leonard1 -
New blog post URLs due to WordPress permalink structure changes. Any SEO repercussions?
A client site had the follwing URLs for all blog posts: www.example.com/health-news/sample-post www.example.com/health-news is the top level page for the blog section. While making some theme changes during Google mobilegeddon, the permalink structure got changed to www.example.com/sample-post ("health-news" got dropped from all blog post URLs). Google has indexed the updated post structure and older URLs are getting redirected (if entered directly in the browser) to the new ones; it appears that WordPress takes care of that automatically as no 301 redirects were entered manually. It seems that there hasn't been any loss of rankings (however not 100% sure as the site ranks for well over 100 terms). Do you suggest changing the structure back to the old one? Two reasons that I see are preserving any link juice from domains linking to old URLs and ensuring no future/current loss of rankings.
Intermediate & Advanced SEO | | VishalRayMalik0 -
Joomla to Wordpress site migration - thousands of 404s
I recently migrated a site from Joomla to Wordpress. In advance I exported the HTML pages from Joomla using Screaming Frog and did 301 redirects on all those pages. However Webmaster Tools is now telling me (a week after putting the redirects in place) that there are >7k 404s. Many of them aren't HTML pages, just index.php files but I didn't think I would have to export these in my Screaming Frog crawl. We have since done a blanket 301 redirect for anything with index.php in it but Webmaster Tools is still picking them up as 404s. So my question is, what should I have done with Screaming Frog re exporting to ensure I captured all pages to redirect and what should I now do to fix the 404s that Webmaster Tools is picking up?
Intermediate & Advanced SEO | | Bua0 -
Is WordPress a Blog in the eyes of Google?
Hi, My online Shop is based on WordPress with the WooCommerce plugin. Now, I have met a SEO guy who told me that's bad in the eyes of Google: Because Google apparently sees my website as a blog and not as a E-Commerce site. Wow, this statement really confused my, since I am working so hard on content and good rankings. Any opinions on this would be appreciated. Best, Robin
Intermediate & Advanced SEO | | soralsokal0 -
HTTP Status Bad Request - 404, but also, add a 400 HTTP Status in certain circumstances?
We currently have a custom 404 page set up for our clients, but the developer has it returning a HTTP 200 for the status code. Big no, no. I'm having that fixed right now. My question is, currently, the custom 404 page is only returned for urls with the extension .aspx: For example : ilovepizza.com/pepperni.aspx would return a 404 page because the correct page is ilovepizza.com/pepperoni.aspx Any other format of URL without the extension (example ilovepizza.com/thumbtack) does not trigger the custom 404 page we've created, but it does trigger a server error with a 404 HTTP status page. I want to change this so this type of error also triggers the custom 404 page because it's more user-friendly and would return them to the website. My question: Is there any benefit to making the /thumbtack errors return the custom 404 page but with a 400 Bad Request HTTP Status? Kind of a novice here in those aspects, but does the 400 Bad Request status indicate that it was a user mistake and not a mistake created on the website? Other suggestions?
Intermediate & Advanced SEO | | EEE30 -
Do follow or no follow on wordpress site?
I have read many different opinions on what links to make do follow on a wordpress website versus which ones to leave as no follow. (internal and external) There does not seem to be any consensus among the inputs to date. Any perspectives on this would be appreciated. thanks
Intermediate & Advanced SEO | | casper4340 -
Duplicate description problem in Wordpress.
Webmaster tools is flagging up duplicate descriptions for the page http://www.musicliveuk.com/live-acts. The page is one page in the wordpress page editor and the web designer set it up so that I can add new live acts from a seperate page editor on the left menu and that feeds into the page 'live-acts'. (it says under template 'live-acts-feed'. The problem is as I add more acts it creates new url's eg http://www.musicliveuk.com/live-acts/page/2 and http://www.musicliveuk.com/live-acts/page/3 etc... I use the all in one SEO pack and webmaster tools tells me that page 2/3/4/ etc all have the same description. How can I overcome this? I can't write new descriptions for each page as the all in one SEO pack will only allow me to enter one for the page 'live-acts'.
Intermediate & Advanced SEO | | SamCUK0