Return to previous page

Responsive Mobile view: Header, Footer and Menu

This topic has 9 replies, 3 voices, and was last updated 4 years, 10 months ago ago by Olga Barlow

Nikita Desai

Participant

May 30, 2019 at 08:57

I am encountering a couple of problems with the mobile version of the site.
1. https://prntscr.com/nva6hh
The menu bar is too narrow and the buttons on both ends are slightly outside it as a result

2. https://prntscr.com/nva6fs
The mobile menu has a second hamburger icon, which closes the menu. Need to remove this.

3.https://prntscr.com/nva6dc
Footer menu, column 2 and 3 are not left aligned in mobile view

#214610 Copied Theme version: Woopress Version 4.5.3

8 Answers

Nikita Desai

Participant

May 30, 2019 at 08:59

One more thing, the submenu of Helpdesk is not visible in mobile version.

#214611 Copied
Rose Tyler

Support staff

May 30, 2019 at 09:12
Hello,

Could you, please, provide temporary wp-admin access?
2/ Please add this code in Theme Options > Custom CSS > Global custom CSS:
```
.mobile-nav-heading i {
    display:  none;
}
```
4/
```
.mobile-nav li .open-child:after,
.mobile-nav-heading.close-mobile-nav:before {
    color: black;
}
.mobile-nav li > ul {
    background-color:  white;
}
.mobile-nav li > ul:before {
    border-bottom-color: white;
}
.mobile-nav li > ul {
    margin-top: 0px;
    margin-bottom: 0px;
}
```
Regards
#214613 Copied
Nikita Desai

Participant

June 18, 2019 at 11:26

Sending you access rights, sorry it took a while to clear with the company. Let me know if the credentials work. The issues remain the same. Tired clearing the cache but that didn’t help. Thanks in advance Rose.

Please contact administrator
for this information.

#215765 Copied

Olga Barlow

Support staff

June 18, 2019 at 12:19

Hello,

We asked you about WordPress Dashboard access but seems you provided something wrong. Please, provide temporary access to your WordPress Dashboard.

Regards

#215774 Copied

Nikita Desai

Participant

June 21, 2019 at 12:01

Sorry about that, please try this

Please contact administrator
for this information.

#215952 Copied
Rose Tyler

Support staff

June 21, 2019 at 13:23
Hello,

About this https://prnt.sc/nva6hh – go to Theme Options > Header settings > Enable header overlap > Off, then add this code in Theme Options > Custom CSS > Global custom CSS:
```
.header-search, .fixed-header-area .header-search {
    margin-top: 0px !important;
}
.fixed-already .navbar-header.navbar-right{
    margin-right: 10px;
}
```
and Custom CSS for mobile:
```
.header-type-9.header-wrapper .header-logo,
.fixed-header-area .header-logo {
    top: 5px;
}
```
Regards
#215964 Copied
Nikita Desai

Participant

June 25, 2019 at 08:51

Doesn’t seem to have made a difference to the hamburger mobile menu but the search icon is looking good now 🙂

If you could also help with point 3
https://prntscr.com/nva6dc
The footers are not aligning in mobile view.

Thanks a lot for the support

The admin access is still valid if you need it.

#216142 Copied
Olga Barlow

Support staff

June 25, 2019 at 10:43
Hello,

You have added the padding-left for the element http://prntscr.com/o6ci4o
So, you have the same padding on the mobile devices http://prntscr.com/o6cidq
Either remove the padding if you don’t need it in element settings or add the custom class for these elements, for eample padding-l-0, and custom CSS that will remove that padding for the mobile devices
```
@media only screen and (max-width:768px){
    .padding-l-0 {
        padding-left: 0 !important;
    }
}
```
Regards
#216159 Copied
Viewing 9 results - 1 through 9 (of 9 total)