Joomla Templates Club 406,261 posts

[freissmann Developer freissmannJoin date: February 2011Posts: 294Downloads:0Uploads:71 Thanks: 79 Thanked: 29 times in 1 posts]

#190004

From my point of view it would make sense to move the menu button to the top logo area to get more space for relevant content when viewing website on smartphones.

Any ideas on how to achieve that?

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#503489

This is link our demo site: http://joomla25-templates.joomlart.com/ja_onepage/ but mobile layout is difference the screenshot as you mentioned.

So that I can take a look and try to assist, please provide the url of the site you’re working on

---

Attachments:

1. 

[freissmann Developer freissmannJoin date: February 2011Posts: 294Downloads:0Uploads:71 Thanks: 79 Thanked: 29 times in 1 posts]

#503510

Hi Ninja,

you can check here.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#503579

You can follow my below solution.

Open templates/ja_onepage/css/custom.css file

Add new script


@media (max-width: 767px) {
position: relative;
margin-left: 220px;
top: -25px;
}


Hope this helps

[piman Friend pimanJoin date: October 2010Posts: 8Downloads:0Uploads:0]

#504373

The code didn’t work for me, but I used:

@media (max-width: 767px) {
.t3-mainnav {
position: relative;
margin-left: 220px;
top: -75px;
}
}


It moves the menu button next to the logo, but the black space where the menu button used to be is still there. I want to get rid of that blank space.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#504429

@piman: It would be great if you can include URL of your site, a screenshot and description on that particular screenshot on what you would like to do. I will try to help you then.

[piman Friend pimanJoin date: October 2010Posts: 8Downloads:0Uploads:0]

#504444

pm sent with site info.

screenshot would be the same as the OP. The menu button has moved as indicated with the red arrow. However the space marked by the blue line still remains.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#504509

I got this error when i tried to access your pm. Please check and send back me again

[piman Friend pimanJoin date: October 2010Posts: 8Downloads:0Uploads:0]

#504618

Resent the PM, I think i send the wrong pswd first time around:-P

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#504657

<em>@piman 387980 wrote:</em><blockquote>Resent the PM, I think i send the wrong pswd first time around:-P</blockquote>

I could access your site now, this is my suggestion:

Open templates/ja_onepage/css/custom.css file

Add new script

@media (max-width: 767px) {
#ja-header {
height: 85px;
}
#ja-header .span10 {
height: 0px;
}
}


1 user says Thank You to Ninja Lead for this useful post

1. kimandboo

[piman Friend pimanJoin date: October 2010Posts: 8Downloads:0Uploads:0]

#504700

Awesome that works perfectly! Thanks and have fun!

[kimandboo Friend kimandbooJoin date: April 2012Posts: 4Downloads:5Uploads:1 Thanks: 6 Thanked: 1 times in 1 posts]

#507995

I was extraordinarily grateful to have found Ninja Lead’s suggestions on how to move the menu button on a smartphone to reduce the footprint for the logo and menu bar(s) over the website content.

I added your suggested code, with a change in the left margin position of the menu toggle button to be 2px, rather than 220px. The left position change is nominal – rather than leaving the menu button close to the center of the screen and almost overlapping the logo:

@media (max-width: 767px) {
.t3-mainnav {
position: relative;
margin-left: 2px;
top: -75px;
}
}

@media (max-width: 767px) {
#ja-header {
height: 85px;
}
#ja-header .span10 {
height: 0px;
}
}

The logo and menu toggle button are now on one bar, as I wanted, although I do have a distinct black line somewhere near the bottom margin of the original position of the menu bar.

If the image I uploaded is displayed correctly, you should see a smartphone screen capture of the logo and menu bar as it appears on the website homepage, with notations: (A) for the black line that I want to eliminate; (B) the thin bar that appears under the combined logo and menu bar, the width of which I would like to control or eliminate entirely.

---

Attachments:

1. 

[Author]

Posts