How to change the Drop Down Menu Style Of Ethos 2

Support
#1

i am using ethos 2 and but the drop down menu of the ethos 2 is not attractive i want to use the drop down menu like this, image attached.
the main header should not be changed but the drop down menu style should be changed to lines styles as shown in picture?

#2

Hi there,

Please add the CSS code below to X > Launch > Options > CSS.

.menu-item span {
    color: #f3f3f3;
}
.menu-item span:hover {
    color: #fff;
}

.sub-menu {
    padding: 1.05em;
}

.sub-menu li {
    padding: 7px 0;
    border-top: 1px solid #394a5c;
}

.sub-menu li:last-child {
    border-bottom: 1px solid #394a5c
}

.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top{
    backgroung-color: #2d3e50;
}

Let us know how it goes :slight_smile:

Best regards.

#3

Great Work - Thank You So Much For Solving the Problem -

Efficient Team
Quick Response
Great Theme with the Great Ideas

1 Like
#4

Got the Solutions On Desktop Version But now the now mobile version the blue colour line that i used in desktop showing clearly in mobile version - in mobile version there was no issue , can you check. Follow the image

#5

Hi there,

Please update the code to:

.desktop .menu-item span {
    color: #f3f3f3;
}
.desktop .menu-item span:hover {
    color: #fff;
}

.desktop .sub-menu {
    padding: 1.05em;
}

.desktop .sub-menu li {
    padding: 7px 0;
    border-top: 1px solid #394a5c;
}

.desktop .sub-menu li:last-child {
    border-bottom: 1px solid #394a5c
}

.desktop .x-logobar, .x-navbar,
.desktop .x-navbar .sub-menu, 
.desktop .x-colophon.top {
    backgroung-color: #2d3e50;
}

Hope this helps.

#6

Thanks Dear - Problem Solved :slight_smile:

#7

You’re welcome, Badar.

1 Like
#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.