Jump to content

Archived

This topic is now archived and is closed to further replies.

MissT

Navbar submenu hover and active color

Recommended Posts

MissT+    4
MissT

Hi there,

I'm using a fixed navbar and one of the menu options has a dropdown submenu.

The hover and active color for the main part of the menu seems to come from the link color (red) which is great. The submenu options from the dropdown part are blue on hover and when active.

[attachment=1659:sub menu issue.jpg]

Where is this blue set?? I don't want it to be blue it needs to be red the same as the main part of the menu.

I'm using DMS Version: 1.0.4 and have set up a child theme. I've had a look at the DMS less colors file but not sure if it is being set there or not?

Many thanks in advance.

Share this post


Link to post
Share on other sites
Jake    74
Jake

Hi MissT - You'll want to modify the following code to adjust the drop down hovers:

 

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a 

 

There is a background image currently being set with a gradient background-image: -moz-linear-gradient(center top , rgb(0, 0, 0), rgb(0, 114, 253)) and also a background-color. Override those settings in your custom CSS.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
MissT+    4
MissT

Thanks for that. 

 

I'm setting up this child theme as a basic starting point for developing multiple more involved themes from this theme.  I'd prefer to amend the less at the highest possible level within my child theme so that it is set by the same variable as the main link color.  Can anyone confirm where this blue is being set in the less please?

 

Many thanks.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

You can add the following to your child themes style.less file.

 

@dropdownLinkBackgroundHover: Color Hex Here;
@dropdownLinkBackgroundActive: Color Hex Here;

 

Add your color value and thats it, what you have done is overridden the default dropdown variable.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
MissT+    4
MissT

Thanks Danny.  I came across this by chance when reading another forum post and thought it might be useful for other who come across this too.

 

http://www.pagelinestheme.com/navbar-dropdown-colors/

 

I can't test it as I now have a 'broken' site when logged into WP - I've commented on another post where others have had the same thing. Weird.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello MissT 

 

Please could you create an admin level account for your Wordpress install and send the credentials to hello @ pagelines.com and we will jump on and take a look at the site for you. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
MissT+    4
MissT

Hi Martin, it's local on my machine so that won't be possible sadly.

 

I'm thinking of removing and re-installing DMS and my child theme and see it that solves it.  I'm also wondering if I may have mucked something up in the style.less as that's what I was doing when it went odd. I'll have a tinker and post back shortly.

 

Thanks anyway! :)

Share this post


Link to post
Share on other sites
MissT+    4
MissT

I've tested the dropdown colour code on another site and child theme style.less and this works for me - I've used @linkColor instead of 'hard coding' the hex colour as I want it to just use the link colour selected in the Color & Style settings within the Global settings.

 

// PL override LESS Variable: will not work in PL DMS Editor's Custom Code area
// https://github.com/pagelines/DMS/blob/Dev/less/dropdowns.less#L88
@dropdownLinkBackgroundHover: @linkColor; // drop down hover color
@dropdownLinkBackgroundActive: @linkColor; // drop down active item / current page color

Share this post


Link to post
Share on other sites
MissT+    4
MissT

re  the weird 'broken site' issue - I've copied over a backup copy of my child theme's style.less replacing the one I'd been editing and all is back to normal. :)

 

All I can think is maybe something wasn't correct with the syntax of my style.less, the site did look like it was missing styles when logged into WP.

 

Hope this helps someonelse along the way :)

Share this post


Link to post
Share on other sites
Rob    547
Rob

It's very kind of you to think of others. Thank you for doing that.  :)


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
×