Topic: Header menu not shoing on mobile and primary menu hover css

This topic has 7 replies, 2 voices, and was last updated 6 years, 6 months ago by Veena.

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

Author

Posts
October 23, 2017 at 12:40 pm #27925

Sujoy Banerjee
Participant

Hi,
1. The header menu is not visible on mobile or small screen devices . How to make it visible on mobile devices just like the primary menu (see ss1 for reference)

2. In the home page , on mouse hovering the parent menu items , the background height need to be reduced as its overlaping with the site’s logo . From where can u reduce the height . I have tried reducing the line-height of
‘#primary-menu > ul.menu > li > a ‘ but its breaking other things : (see ss2 for reference)

#primary-menu > ul.menu > li > a {
padding: 0 22px 0;
line-height: 46px; /* this is breaking other things */
}

October 23, 2017 at 12:41 pm #27928

Sujoy Banerjee
Participant

This reply has been marked as private.

October 23, 2017 at 12:58 pm #27930

Sujoy Banerjee
Participant

ok, i have managed to display the heading menu in mobile using below css but how to position it exactly in the center just like the other elements

@media only screen and (max-width: 767px){
#header-menu {
display: block !important;
}}

October 24, 2017 at 6:07 am #27942
Veena
Moderator
Pls have the below custom CSS in themeoptions-
```
@media only screen and (max-width: 767px){
#header-menu {
    float: none !important;
    text-align: center;
#header-menu li {
    float: none !important;
}}
```
October 24, 2017 at 6:41 am #27944

Sujoy Banerjee
Participant

ok that worked for the header menu in mobile device

But in the home page , on mouse hovering the parent menu items , the background height need to be reduced as its overlaping with the site’s logo . From where can I reduce the height . I have tried reducing the line-height of
‘#primary-menu > ul.menu > li > a ‘ but its breaking other things : (see ss1 for reference)

#primary-menu > ul.menu > li > a {
padding: 0 22px 0;
line-height: 46px; /* this is breaking other things */
}

October 24, 2017 at 12:26 pm #27955
Veena
Moderator
Pls try the below custom CSS –
```
#primary-menu {
    top: 20px;
}
#primary-menu > ul.menu > li > a {
    line-height: 60px;
}
.dropdown-menu-wrap > ul.menu > li > ul.sub-menu {
    top: 60px;
}
```
October 24, 2017 at 12:32 pm #27956

Sujoy Banerjee
Participant

nope,its still overlapping with our logo .

what if i just do a css buttom-border on the active and hovered menu item instead of that background color ?
can u provide the custom css for that

October 25, 2017 at 2:21 am #27965
Veena
Moderator
you can use the below custom CSS –
```
#primary-menu > ul.menu > li:hover, #primary-menu > ul.menu > li.sfHover {
    border-bottom: solid 1px #fff;
    background: none;
}
```
Author

Posts