Mobile button next to site title on tablet

Support
#1

Hi,

I’ve searched online but couldn’t find an answer, and hope you can help me.

When the menu button is shown (because of lack of space for links to be displayed next to eachother) I’d like to have it next to the site title as long as there is room.

This behaviour is not necessary on small mobile viewports (current behaviour on mobile is ok).

Thanks in advance

#2

Hello @IvoBosma,

Thanks for asking. :slight_smile:

Please add following CSS under X > Launch > Options > CSS to place mobile hamburger menu next to title:

@media screen and (max-width: 900px) and (min-width: 520px) {.x-logobar {width: 80%; float: left;} .x-navbar-wrap {float: left; width: 20%;} .x-navbar-inner {min-height: 66px;} .x-btn-navbar, .x-btn-navbar.collapsed {margin-top: 15px;}}

Please note that, as per your request above code will only take effect on tablet devices. Here is a screenshot of how it would look like. https://screencast.com/t/3f61ifsFlA1

Please let us know your feedback.

Thanks.

#3

[quote=“Prasant, post:2, topic:21866”]
@media screen and (max-width: 900px) and (min-width: 520px) {.x-logobar {width: 80%; float: left;} .x-navbar-wrap {float: left; width: 20%;} .x-navbar-inner {min-height: 66px;} .x-btn-navbar, .x-btn-navbar.collapsed {margin-top: 15px;}}
[/quote]That was a lightning fast reply! Unfortunately, it doesn’t seem to work. I tried it on 3 different browsers on my Macbook

#4

Hello @IvoBosma,

Thanks for updating thread. :slight_smile:

It won’t work in Macbook because of the screen resolution. As per the first ticket, you wanted the changes to effect only on Tablet devices. Above code will only effect navigation and menu when browsing website from tablets. Are you using dev tools mobile emulator to view the website? Here is a screencast of the tests that I have done on chrome emulator and code seems to work absolutely fine. https://screencast.com/t/D56BpdJyS

Thanks.

#5

Hi Prasant,

I’ve tried it on different browsers with appropriate screensize (and reloading), I’ve tried it on Google chrome with developer tools and different emulators, and I’ve called my parents (I don’t own a tablet) with an iPad: on none of the devices/emulators is the button shown next to the title, but below it…

With my request for tablets I meant the viewports of tablets (so for example when you view the screen on your laptop, but not in a full window you would see the menu button next to the title. Sorry if I was unclear on that).

I have seen your screencast, however I can’t get the site to behave like that. I hope you’ve got a clue of what might be happening, because I don’t at the moment

See this screenshot as one of the examples I’ve tried (Google chrome developer tools emulator):

#6

Hi There,

Please try using this code in Theme Options CSS instead:

@media(max-width: 969px) {
a.x-brand.text {
    text-decoration: none;
    font-size: 33px;
    float: left;
    margin-left: 20px;
    margin-top: 46px;
}
.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 18px;
    float: right;
    margin-right: 20px;
    margin-top: -34px;
}

.x-logobar-inner {
padding-top: 0px;
padding-bottom: 0px;
}
}

Let us know how it goes!

#8

I combined the two solutions and it works now. So thank you both!

#9

You’re more than welcome, glad we could help.

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.