Responsive menu fix

This topic has 14 replies, 5 voices, and was last updated 8 years by Radu.

Author
March 30, 2016 at 03:15 #113459

tmh23
Participant

Two issues I am hoping to resolve.

The first is to have the menu not have the odd thing happen in the first screen shot where it doesn’t yet go into the mobile menu but puts the menu items spaced below but still to the right of the logo. I’d like it to at whatever screen scaling is needed to change to the mobile style menu directly.

The second is how can the top menu and the social icons be on a single line when on mobile. Currently they are formatting on two separate lines which looks odd and takes up valuable screen space. ( see 3rd screen shot)

Thanks,

Troy

Attachments:
You must be logged in to view attached files.
April 1, 2016 at 12:38 #114023

Laura
Moderator
Hello, for top menu try the following css code, inside style.css of child theme
COPY CODE
```
.top-menu.col-sm-12.col-md-7.no-padd {
    margin-top: -33px;
}
```
About the first issue, what devices do you use?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
April 1, 2016 at 17:02 #114119

tmh23
Participant

The first issue happens with any desktop browser. If the browser window is scaled small enough like on a laptop or if you have a high resolution larger screen and make the browser window small. At a certain size it formats it weird like in the screen shot. Happens with any browser and on both mac and PC.

Thanks,
Troy

April 1, 2016 at 18:38 #114140

tmh23
Participant

That CSS doesn’t work. The top menu disappears when the browser window is scaled larger.

April 4, 2016 at 21:58 #114547

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
April 13, 2016 at 12:39 #116235

Radu
Moderator
Hi,

Use this for single line and for the aligning menu text to right when you are on mobile
COPY CODE
```
@media (max-width:700px) {
div#top-social { padding: 10px; }
.top-bar > div, .top-menu {width:49%;display:inline-block;border:0 !important; margin:0 !important;padding:0 important;} 
#header .navbar-nav>li>a {
    text-align: right;
}
}
```
REgarding to this i cannot reprudce : https://archived.seventhqueen.com/wp-content/uploads/2016/03/Products_%E2%80%93_Part_Time_Golf_Co_.png

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
April 21, 2016 at 08:46 #118107

tmh23
Participant

If you scale the browser window on desktop you will see what happens in the screenshot.

Troy

Attachments:
You must be logged in to view attached files.

April 21, 2016 at 08:47 #118110

tmh23
Participant

Here’s another screenshot of it happening even worse as the browser window gets smaller… this would happen on a smaller laptop screen.

Troy

Attachments:
You must be logged in to view attached files.

April 21, 2016 at 08:54 #118114

tmh23
Participant

When I add the code you provided above I get this. The menus go to the + with dropdown. And it messes up the normal menu as well.

Troy

Attachments:
You must be logged in to view attached files.

April 21, 2016 at 18:05 #118195

Radu
Moderator

Hi,

What you need requires significant amount of time to create a functionality like that and our purpose here is to help you with any theme problem that you may encounter or with small customizations.
For anything that theme doesn’t have or you need something different you should hire a programmer/web developer to achieve what you need.

If you want a quote from our developers team, contact our colleague cornel@seventhqueen.com about your request.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

April 21, 2016 at 19:02 #118220

tmh23
Participant

OK. Is this true for both of these issues? It seems that the menu problem when scaling the browser window is a theme issue as users with tablets and smaller laptops will see this problem at certain browser window sizes. It seems that the theme needs to have it switch to the mobile menu instead of tucking the menu under the site logo.

Troy

April 21, 2016 at 19:54 #118243

Abe
Keymaster

Hi, normally you should adjust the logo size and menu items number so that does not happen. Maybe try to make the logo another format.

We will think of a solution for the next theme versions

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

April 21, 2016 at 20:16 #118251

tmh23
Participant

Thank you.

Troy

November 3, 2016 at 21:13 #142780

dk20005
Participant

I am having a similar issue with the menu dropping below the logo. Is there a way to adjust at the size at which the menu switches to the menu button?

November 3, 2016 at 22:22 #142785

Radu
Moderator

Hi @dk20005

Please open a new ticket in that you will provide some screenshots that shows your problem + providing URL and admin credentials.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts