Responsive menu fix

[tmh23]

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.

[Laura]

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 🙂

[tmh23]

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

[tmh23]

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

[Laura]

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 🙂

[Radu]

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 ?

[tmh23]

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.

[tmh23]

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.

[tmh23]

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.

[Radu]

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 ?

[tmh23]

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

[Abe]

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.

[tmh23]

Thank you.

Troy

[dk20005]

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?

[Radu]

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