Joomla Templates Club 406,261 posts

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#199830

Hi guys,

In my previous thread I talked about the content which wasn’t responsive. (I hired a someone who fixed this, so its all good) But I have a problem with the menu, the position of the main menu is not the same on different kind of resolutions.

How can I achieve to fix this?

Thank you again!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#542995

Hi Kelvin,

In small screen device, the menu button will appear and when you click this button, you will see all menu items. You can see the same in our demo site here: http://ja-appolio.demo.joomlart.com/

Could you describe in more details of how you want to achieve here? some screenshots will be helpful.

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#543009

Whoops, sorry! I didn’t mean on mobile screens but I meant on desktop resolutions. You can see it in the pictures here:

Here its good:

Here its bad on a bigger screen:

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#543066

Hi Kelvin,

You can use media jQuery to add specific css rule for large screen (or specific resolution as you want). Here is workaround:
– Go to file: /templates/ja_appolio/css/custom.css (create this file if it doesn’t exist).
– Add css rule:

@media screen and (min-width: 768px) {
.nav.navbar-nav.level0 {
margin-left: 300px; <<<or change to your desired value
}
}


1 user says Thank You to Saguaros for this useful post

1. kelvin899

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#543103

Hey Saguaros,

Thank you so much, that worked like a charm! My only question left: How can I do this with the slogin container?

I tried to copy the code but then for the slogin container, but it didn’t worked! But thank you so far!:D

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#543167

Could you describe in details of how you want to achieve? With the slogan container, you can try with this declaration:

@media screen and (min-width: 768px) {
.custom.slogin.container {
/*your style goes here*/;
}
}


1 user says Thank You to Saguaros for this useful post

1. kelvin899

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#543205

Hey Saguaros,

Thank you so much! It already worked! Thanks!!:laugh:

[Author]

Posts