menu dropdowns - Support | Kriesi.at - Premium WordPress Themes

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
February 27, 2018 at 5:04 am #918158

murdochduncan
Participant

Hello Team!

1. I wonder if you could help me line up the menu dropdown items so that they are stacked one on top of each other?

Right now they are horizontally arranged and I’m having trouble finding out how to adjust them.

2. Also, I’m trying to rid of the large green line over the top of the drop-downs and the vertical dotted lines.
3. Any way to change the color of the font according to the page its on? I’d like to either have black or white depending on the background of the page.

Your help resolving this would be greatly appreciated.

Thank you!

Duncan

February 27, 2018 at 3:15 pm #918497
Nikko
Inactive Moderator
Hey murdochduncan,

1. Sure, can you go to Enfold > Menus then edit The Walk menu item and uncheck Use as Mega Menu.
2. Try adding this css code in Quick CSS (located in Enfold > General STyling):
```
#top #header .sub-menu {
    border-top: 0 !important;
}
```
3. Yes, you just need to take advantage on unique class name applied on the body on every page, for example your About page which has an id of 296, you can use this css code and add to Quick CSS:
```
.page-id-296 p {
  color: #fff !important;
}
```
Hope this helps. Let us know if you need further assistance :)

Best regards,
Nikko
February 28, 2018 at 6:23 am #918812

murdochduncan
Participant

Hello Nikko!

I continue to be impressed and pleased with your response time, courteous service and problem solving abilities. Thank you so much.

The issues:
1. Resolved!
2. Yes!
3. Doesn’t seem to be working…

Maybe I can approach this from another angle.
Could you provide me with a way (quick CSS) to alter to submenu dropdowns concerning:

1. Background color.
2. Transparency.
3. Border color and width size.
4. Size of cells (height)

This is a lot to ask I know…

Thank you for your assistance,

Duncan

February 28, 2018 at 11:21 am #918946
Nikko
Inactive Moderator
Hi,

Thanks for your kind words, we are always happy to assist you :)
You can use this for the homepage:
```
#top.page-id-2526 .main_menu .sub-menu li > a {
    background-color: rgba(0,0,0,0.7) !important;
    color: #fff !important;
    padding: 12px 15px !important;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
    width: 200px;
}
```
you can also use this for the homepage: #top.page-id-2526 .main_menu .sub-menu li > a
For the About Us page you can use:
```
#top.page-id-296 .main_menu .sub-menu li > a {
    background-color: rgba(0,0,0,0.7) !important;
    color: #fff !important;
    padding: 12px 15px !important;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
    width: 200px;
}
```
you would notice it’s the same code just different page-id-xxx, you just need to know the id of the page and use the same code and that should work.

Best regards,
Nikko
March 1, 2018 at 3:18 am #919350

murdochduncan
Participant

Nikko,

This is terrific!

There is a strange transparent box to the left of the dropdown though… Could you help me clear that out? Could it be from a past quick css code overriding this new one?

Once that is cleared, I am happy to have the submenu display be the same throughout the site on all pages. To apply the same submenu settings for all the pages without doing it per individual page how could we modify the code?

And that should be all for this ticket! Thank you for working on this!

Duncan

March 1, 2018 at 3:21 am #919352

murdochduncan
Participant

Ok ONE more thing… The hover rollover effect isn’t there anymore.

Is there a quick css to activate that with a color option?

Thank you,

Duncan

March 1, 2018 at 2:20 pm #919648
Nikko
Inactive Moderator
Hi Duncan,

I could not see the transparent box that you have mentioned, can you post a screenshot on how it looks on your end? as for applying to all pages, you can use this one:
```
#top .main_menu .sub-menu li > a {
    background-color: rgba(0,0,0,0.7) !important;
    color: #fff !important;
    padding: 12px 15px !important;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
    width: 200px;
}
```
For rollover effect it’s almost similar, just add the :hover after the a tag, here’s an example:
```
<pre><code>#top .main_menu .sub-menu li > a:hover {
    background-color: rgba(0,0,0,0.4) !important;
}
```
Best regards,
Nikko
March 2, 2018 at 3:25 am #920053

murdochduncan
Participant

Hey Nikko,

The codes you provided worked very well! Thank you so much. I modified them to fit the theme of my site.

There is still that transparent shadow of a box to the right of the dropdown. It looks like an outer glow shadow but it’s extended beyond the dropdown box I created. It would be great to have that shadow effect but properly aligned to fit the box

You see it when you scroll down the page with the submenu engaged especially over a white background.

I actually don’t know how to include a screenshot… I drag jpg image to this box but it opens another page.

You will see what I’m talking about though if you do the above.

Thank you,

Duncan

March 2, 2018 at 8:29 am #920160
Nikko
Inactive Moderator
Hi Duncan,

I see it now, can you try adding this css code also:
```
#top .main_menu .sub-menu {
    width: 170px;
}
```
That should fix it. As for including a screenshot though it’s not needed anymore on this thread, you just upload the image in https://imgur.com/ then post the link here.
Let us know if you need further assistance :)

Best regards,
Nikko
March 3, 2018 at 12:12 am #920590

murdochduncan
Participant

Nailed it! Thank you so much Nikko for helping me resolve my issues. Exceptional service! You have a great rest of your day.

Best,

Duncan

March 3, 2018 at 12:06 pm #920757

Victoria
Inactive Moderator

Hi Duncan,

Glad we could help :)

If you need further assistance please let us know.
Best regards,
Victoria
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.