badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Drop Down Menu Items

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 29, 2016 at 9:59 pm #45172
    info110
    Participant

    Is there a way to make one of the main menu items a drop down and link to other pages?

    May 30, 2016 at 9:56 am #45180
    Theme Horse Support Team
    Keymaster

    Hi info110,

    Yes you can do it. Goto dashboard -> appearance -> menus -> and use custom link instead of using page/ post to link anywhere you like.

    Thank you!

    May 30, 2016 at 11:46 am #45186
    info110
    Participant

    OK, so I added custom links and know when I hover over the menu item that I added them to, the drop down menu appears with the custom link in it. However when I move my mouse down to click on one of the links, they drop down menu disappear before my mouse can reach it and click one. It acts as if the drop down menu needs to open a little higher on the page, so that my mouse can reach it before they disappear. Follow?

    May 30, 2016 at 12:07 pm #45187
    info110
    Participant

    In other words, I have to move my mouse beyond the point that I am no longer hovering the menu item that causes the drop down menu to appear. So the drop down disappears before I can reach it with my mouse.

    I assume I need to reduce the spacing above the drop down menu to bring it up higher on the page, so I don’t have this problem.

    May 30, 2016 at 12:26 pm #45188
    info110
    Participant

    I figured out how to fix it.

    May 31, 2016 at 7:50 am #45201
    Theme Horse Support Team
    Keymaster

    That’s great info

    Thank you!

    July 8, 2016 at 6:47 pm #45909
    karen2
    Participant

    I’m having the same problem with the drop down menu disappearing before I can select a sub-menu page. This only happened after I did the recent upgrade; it worked fine until then. I can’t figure out how to fix it. I’ve only got very basic html coding skills; so, specific instructions on steps to take would be enormously appreciated. Thanks!

    July 11, 2016 at 11:22 am #45925
    Theme Horse Support Team
    Keymaster

    Hi karen2,

    Can you provide you site link? So that we can help you.

    Thank you!

    July 12, 2016 at 6:56 pm #45950
    karen2
    Participant

    Hi,

    it’s http://dropitanddrive.com/

    Thanks!

    /Karen

    July 15, 2016 at 5:21 am #45978
    Theme Horse Support Team
    Keymaster

    @karen2

    Go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save button:

    #access ul li ul {
    top: 90px;
}

    Thank you!

    July 18, 2016 at 9:10 pm #46025
    karen2
    Participant

    Hi,

    thank you for the code; I’m not not clear on where exactly to put it within the CSS. This is what I have showing now:

    /* =Menu
-------------------------------------------------------------- */
#access {
	float: right;
}
#access li {
	float: left;
	position: relative;
	margin: 0 0 0 20px;
}
#access a {
	color: #435464;
	display: block;
	float: left;
	font-size: 16px;
	text-transform: uppercase;
	padding: 40px 0 0;
	height: 50px;
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
	color: #0ea6b5;
}

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
	display: none;
	z-index: 9999;
}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
	display: block;
}
#access ul li ul {
	position: absolute;
	background-color: #fff;
	border-top: 4px solid #0ea6b5;
	top: 100px;
	left: 0;
	width: 190px;
	-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#access ul li ul li {
	float: none;
	margin: 0;
}
#access ul li ul li a,
#access ul li.current-menu-item ul li a,
#access ul li ul li.current-menu-item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-ancestor ul li a,
#access ul li.current_page_item ul li a {
	float: none;
	line-height: 20px;
	font-size: 13px;
	font-weight: normal;
	height: 100%;
	padding: 6px 10px;
	color: #777;
	text-transform: capitalize;
}
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
	background-color: #F9F9F9;
	color: #0ea6b5;
}
#access ul li ul li ul {
	left: 190px;
	top: 0;
	border: 0 none;
	-webkit-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
	box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
}

    Thanks in advance, again.

    July 20, 2016 at 11:43 am #46055
    Theme Horse Support Team
    Keymaster

    Hi Karen2,

    Do not paste it directly in the style.css (theme main CSS file)
    Login to WordPress admin site and Go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS and paste the CSS code there and click on save button. So that your code will not be lost if you update the theme in future.

    Thank you!

    July 23, 2016 at 4:40 pm #46124
    karen2
    Participant

    Hi again,

    THANK YOU so much for the step-by-step instructions. It worked!!

    Appreciate your time.

    Cheers,
    Karen

    July 25, 2016 at 7:55 am #46143
    Theme Horse Support Team
    Keymaster

    That’s great Karen

    Thank you

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.