Dropdown Menu items problem

giacomo.trevisan
(@giacomotrevisan)

11 years, 4 months ago

Hi all,

I have two annoying problems concerning drop down menu/submenu items and navbar submenu items of my website.

1) In the dropdown menu, the items appear in line instead of as a list. I would like to have a list as happened before the updates.

2) I don’t know how to change hover background color of submenus. Now is transparent but i would like to have blu one as other items on hover.

Is there someone who can kindly help me and tell me what edit in my style.css?

Many thanks in advance.

G.

Viewing 7 replies - 1 through 7 (of 7 total)

(@rdellconsulting)

.navbar-wrapper .navbar.resp .nav > li .dropdown-menu li {
  background-color: #16335b;
}

1) Don’t understand as looks OK to me. Try clearing cache Ctl/F5 (Win) Cmd/F5 (Mac)

Thread Starter

giacomo.trevisan

(@giacomotrevisan)

11 years, 4 months ago

Thanks a lot rdell!

2) It works! Thanks!

1) Don’t you see the menu like in this screenshot?

rdellconsulting

(@rdellconsulting)

11 years, 4 months ago

Ah, you mean responsive at <980px. It seems OK at 768px but when you drop to smaller viewports, you need to adjust CSS using @media

Thread Starter

giacomo.trevisan

(@giacomotrevisan)

11 years, 4 months ago

Yes, exactly.

Could you please suggest me what to add in style.css? I have some difficulties in understanding @media!

Many thanks in advance.

rdellconsulting

(@rdellconsulting)

11 years, 4 months ago

Take out this line 34:

.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}

Thread Starter

giacomo.trevisan

(@giacomotrevisan)

11 years, 4 months ago

Thanks. Do you mean like this?

/* MEDIA MENU MOBILE */

/* ============================================== */
/* iPad Landscape                                 */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

/* ============================================== */
/* iPad Portrait                                  */
/*                                       768x1024 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

/* ============================================== */
/* Small Tablet Landscape/Portrait                */
/*                                        800x600 */
/* ============================================== */
@media screen and (min-width: 600px) and (max-width: 800px) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

/* ============================================== */
/* iPhone5/Android landscape (& narrow browser)   */
/*                                        568x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:568px) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

/* ============================================== */
/* iPhone4/Android landscape (& narrow browser)   */
/*                                        480x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:480px) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

/* ============================================== */
/* iPhone4/Android portrait               320x480 */
/* iPhone5 portrait                       320x568 */
/* ============================================== */
@media screen and (max-width:320px) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

/* ============================================== */
/* Smaller devices                                */
/* Android Landscape                      320x240 */
/* ============================================== */
@media screen and (min-width:240px) and (max-width:320px) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

/* ============================================== */
/* Smaller devices                                */
/* Android Portrait                       240x320 */
/* ============================================== */
@media screen and (max-width:240px) {
.navbar-wrapper .navbar.resp .nav > li {
    float: none;
    display: inline-block;
}
}

Nothing changed 🙁

rdellconsulting

(@rdellconsulting)

11 years, 4 months ago

No, in your Child Theme style.css at line 34 you have that code.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Dropdown Menu items problem’ is closed to new replies.

Tags