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
-
Remove Product & Category from URLS in Wordpress
Does anyone have experience removing /product/ and /product-category/, etc. from URLs in wordpress? I found this link from Wordpress which explains that this shouldn't be done, but I would like some opinions of those who have tried it please. https://docs.woocommerce.com/document/removing-product-product-category-or-shop-from-the-urls/
Intermediate & Advanced SEO | | moon-boots0 -
All of my blog titles have disappeared. In need of Wordpress help.
Not sure if this is the right place to ask this question but here it goes. All of the titles on my real estate website have disappeared. I have spent hours looking through different forums trying to figure out how to make them show up. Also whenever I hover the cursor over links they turn to white and disappear as well. This is the website: http://www.acolerealty.com/blog/ If this helps here is the custom CSS in worpress is the following: /* GREEN */ body {background: #eff3ec !important;} .header-membership {
Intermediate & Advanced SEO | | artscube.biz
background: #fff !important;
box-shadow: none !important;
border-bottom: 2px solid #e5e9e3 !important;
} .header-membership a {
color: #909090 !important;
text-shadow: none !important
} h1#site-title a {
color: #397249 !important;
} header nav#main-nav {
background: #7aad79 !important; /* Old browsers /
background: -moz-linear-gradient(top, #7aad79 0%, #397249 100%) !important; / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7aad79), color-stop(100%,#397249)) !important; / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #7aad79 0%,#397249 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #7aad79 0%,#397249 100%) !important; / Opera 11.10+ /
background: -ms-linear-gradient(top, #7aad79 0%,#397249 100%) !important; / IE10+ /
background: linear-gradient(to bottom, #7aad79 0%,#397249 100%) !important; / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7aad79', endColorstr='#397249',GradientType=0 ) !important; / IE6-9 */
} #t-header-container .home-search-container #header-top-search::before {
background: #7aad79 !important; /* Old browsers /
background: -moz-linear-gradient(top, #7aad79 0%, #397249 100%) !important; / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7aad79), color-stop(100%,#397249)) !important; / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #7aad79 0%,#397249 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #7aad79 0%,#397249 100%) !important; / Opera 11.10+ /
background: -ms-linear-gradient(top, #7aad79 0%,#397249 100%) !important; / IE10+ /
background: linear-gradient(to bottom, #7aad79 0%,#397249 100%) !important; / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7aad79', endColorstr='#397249',GradientType=0 ) !important; / IE6-9 */
} input.button-primary {
background: #7aad79 !important; /* Old browsers /
background: -moz-linear-gradient(top, #7aad79 0%, #397249 100%) !important; / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7aad79), color-stop(100%,#397249)) !important; / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #7aad79 0%,#397249 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #7aad79 0%,#397249 100%) !important; / Opera 11.10+ /
background: -ms-linear-gradient(top, #7aad79 0%,#397249 100%) !important; / IE10+ /
background: linear-gradient(to bottom, #7aad79 0%,#397249 100%) !important; / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7aad79', endColorstr='#397249',GradientType=0 ) !important; / IE6-9 */ border:1px solid #23472d !important;
} input.button-primary:hover {
background: #628b61 !important;
} footer {
background: #e4e8e1 !important;
}0 -
How to work with schema.org together with Wordpress
Hi schema.org seems to be quite simple when working with a plain HTML website. You just look up the code you need on schame.org and implement it in the HTML file as required. But when using Wordpress things become more complicated. I have to use plugins for schemata and then I can only use the schemata that exist in those plugins which are very limited. How do you deal with this issue? Cheers Marc
Intermediate & Advanced SEO | | RWW1 -
301 redirects in Wordpress vs. making old posts that you no longer want your audience to see private.
I'm working on Wordpress at the moment changing the content of a page on my website. The page has a lot of educational information and each section is unique. I had to go through and edit each section on google documents and now I'm posting all the new pages and making the old pages private on wordpress. Is this a good idea? I'm worried google will still crawl my private education pages and think these are duplicates since the new pages somewhat resemble the old. Also, should I be 301 redirecting all the old education pages to the corresponding new ones even if they are private on wordpress? I understand that the 301 redirect should only be used if you want the old page to go to a new one. What i don't understand id weather this will still be relevant or work if I've already made the old page private on wordpress. Thank You!
Intermediate & Advanced SEO | | SapphireCo0 -
How to migrate from an asp.net to wordpress without loosing domain authority?
I would like to migrate my current website, which is asp.net, to WordPress. However the current asp.net is sitting on hosting which is windows based and WordPress isn't very compatible. Do I need to migrate hosting to a Linux based hosting provider? But if I do can I still migrate the asp.net files from my current website so I can 301 redirect? Any help on this would be great. Regards, Tom
Intermediate & Advanced SEO | | CoGri0 -
Yandex webmasters not letting me add my site
I purchase a a domain xxx.ru and want to add my new website to yandex webmaster tools. However, when I try adding my site I get a message saying "this site is a mirror of yyy.ru" (the old website who used to have my new domain and has since move to this new domain instead of the one I purchased from them) After getting this message I am not able to add my website. Any advice?
Intermediate & Advanced SEO | | theLotter0 -
Using AggregateReview markup to generate star sinppets for wordpress blog posts? OK or Spam?
Do you believe using a plugin that allows visitors to rate your blog posts and then generating AggregateReview markup code for each blog post is in accordance with google guidelines? I saw there are a couple of wordpress plugins that offer this functionality. Anybody who had any negative experience? Star icons will certainly increase visibility in SERP.
Intermediate & Advanced SEO | | lcourse0 -
How To Create Dynamic WordPress Tags
Does anyone know how to make WordPress "tag" pages automatically generate a description based on the posts included in the tag? I have a lot of tags, and most of them rank well for long tail keywords. However I have noticed that although they have a dynamically generated "title meta tag" they do not generate a "description meta tag". I know WordPress lets you customize the description for each tag, but I have way to many for that. I need the description meta to be auto generated from the posts that are being tagged, rather than not including one at all. Does anyone know how to do this?
Intermediate & Advanced SEO | | MyNet0