Announcement

Collapse
No announcement yet.

Text Colours In Mega Menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Text Colours In Mega Menu

    I wonder if anyone can help.

    I'm in the process of upgrading to 2016 using the 'SMART' responsive design. The problem I have is that I want to have a different colour for the links in the main part of the website to the text colours in the mega menu. When I use the built in Themes Editor it wants to change all the links colours at the same time. So if I try to have a dark background to my Mega Menu with white links it also turns all my product links further down the page white (Which makes them invisible on my white page background.).

    I'm wondering if I need to manually edit the underlying CSS file? I've had a look at it and my knowledge of CSS is quite basic compared to the complexity of this file. I cant quite figure out which bits to edit to change the Mega Menu text colours.

    Any Advice would be really appreciated.

    Thanks,

    Mark
    Mark Lowery
    Lomo

    #2
    Code:
    #mega-menu ul li a, #brochure-menu li a
    in the responsive stylesheet does the menu bar links. It doesn't have a colour so you need to add one like this:
    Code:
    #mega-menu ul li a, #brochure-menu li a {
    	display:block;
    	width:9em;
    	margin:0;
    	padding:1em 0;
    	text-align:center;
    	box-sizing:border-box;
    	color:#000000;
    }
    The hover is in the Current (Smart) stylesheet: - change the colour to suit:

    Code:
    #mega-menu ul li:hover a, #mega-menu ul li:hover a:hover, #brochure-menu li:hover a, #brochure-menu li:hover a:hover {
    	color:#ff0000;
    	text-decoration:none;
    }
    Further down look for:

    Code:
    #mega-menu ul li:hover ul li a, #mega-menu ul li:hover ul li a:hover, #brochure-menu li:hover li a, #brochure-menu li:hover li a:hover {
    	color:<actinic:variable name="Palette1" />;
    }
    copy and edit both versions adding your colours:

    Code:
    #mega-menu ul li:hover ul li a, #brochure-menu li:hover li a {
    	color:yellow;
    }
    #mega-menu ul li:hover ul li a:hover, #brochure-menu li:hover li a:hover {
    	color:purple;
    }
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    Comment


      #3
      Hi Jonathan,

      Many thanks for taking the time to put this response together. After posting I started to experiment with a different tactic.... not manually altering the mega menu colours, but manually altering the other font colours that normally change at the same time as the mega menu. I'm not sure which will end up with the easiest solution , I'm at the half way stage now and will now be able to try both solutions.

      Many thanks!

      Mark.
      Mark Lowery
      Lomo

      Comment

      Working...
      X