Joomla Templates Club 406,261 posts

[micahmj11 Friend micahmj11Join date: January 2012Posts: 14Downloads:9Uploads:3 Thanks: 4]

#199546

I would like to change how the mainmenu is configured in the “Small” responsive layout size. Currently, it is the same as the “Large” and “Medium” layouts, except that the navbar becomes two rows, with the menu pushed down into the second row. The mainmenu then collapses into the responsive menu only in the “Extra Small” layout. I do not like how the two row navbar looks, and would prefer to keep it in one row. Is there a way to force the mainmenu in the “Small” layout size to be the same as it is in the “Extra Small” size?

Thanks for your help!

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

#541716

Hi

You can achieve that by making change for media queries breakpoints of Bootstrap via the LESS file: templatesja_playmaglessvariables.less

Just increase value (in pixel) for variable corresponding with the screen size you want to have responsive menu.


// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;


Then go to template manager section in Admin area, compile LESS to CSS

Please also remember to backup the all current css files first as when compiling less to css, they will be overridden.

Regards

[micahmj11 Friend micahmj11Join date: January 2012Posts: 14Downloads:9Uploads:3 Thanks: 4]

#541736

Thanks so much for the tip. Very good information. This might provide a solution I can settle for, but it does not do exactly what I want. Since I am increasing the size of the small screens (which is for tablets), I am essentially lumping those screen sizes together with the extra small screens (the phones) which will make them all behave the same way. I don’t really want to do that, since I want their layout to be slightly different.

I would like the phone size screens to work they way they do by default: They use the responsive navbar, and they set the “topbar-1” position to be NOT visible. This works great, since I am using the topbar-1 to display a graphic that is unnecessary on phone sized screens.

But for tablet sized screens, the image I have in the topbar-1 position looks fine. So, I would like to keep it visible, as the default layout for the tablet screen size does, but I want to change to look of the navbar. I want it to collapse into the responsive navbar. You can see how it currently looks on my test server here: http://192.185.150.52/~epgn/

Is there a setting somewhere in the LESS file I can change that will affect the type of navbar used on the spotlight in the small screen? Does that makes sense?

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

#541796

Do you mean that in tablet size screen the menu should be like this: http://prntscr.com/416ggk ? If so, you can change the value for @screen-sm and @screen-md variables as below:


// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 1025px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 1025px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

In case that I’m misunderstanding your idea, kindly send me some screenshots illustrating how you want to achieve so that I can give you further suggestion.

[micahmj11 Friend micahmj11Join date: January 2012Posts: 14Downloads:9Uploads:3 Thanks: 4]

#541885

I really appreciate you trying to understand my needs and help. Thank you. Let me try to explain with screenshots looking at both the configuration inside the template manager and the results it produces on my website. I am satisfied with how the Large, Medium, and Extra Small screens render by default. My problem, however, is with the Small (tablet sized) screen. Lets look at the Medium and Extra Small screens first to see how it is producing the results I am looking for.

Medium Screen

Take a look at the screenshot above. The top of the image shows the template manager configuration. The topbar-1 position is visible and the mainmenu is in the section right below it lined up between the site logo and the followus and search positions. You can see right below I have the result it creates on my website, displaying a banner in topbar-1, and the full navbar in a single row below it. This is perfect.

Extra Small Screen

Also rendering exactly how I want is the Extra Small screen. Take a look a the screenshot. The topbar-1 position is turned off. The screensize is too small for the banner and I do not want to see it on phones. Below it in the next row is the mainmenu collapsed into the small responsive menu. It is also in the same single row as the site logo and the followus and search positions. You can see it produces a simple collapsed navbar with no banner above it.

Small Screen

This is where my problem is. Take a look at the screen shot. The first row works as I wish. The topbar-1 position is visible and it displays the banner. That is what I want. The tablet screens are big enough that the banner image looks fine. But the template manager handles the mainmenu in a way I do not like. It pushes the full navbar down to a row below where the site logo and the followus and search positions are located. It also adds the off-canvas menu button at the end. You can see this in the screenshot under DEFAULT RESULT.

What I want to see is listed in the same screenshot at the bottom under DESIRED RESULT. Do not show the full menu in a second row, and only show the collapsed menu button that opens the off-canvas menu. The advise you have given so far simply makes the template skip over the Small screen size and go directly to the Extra Small screen size. This is not desired because I loose the banner image displayed in the topbar-1 position even thought it looks fine on the tablet size.

So my question is, how do I modify the details of layout for the Small screen size to make the mainmenu position work just like it does in the Extra Small screen size?

---

Attachments:

1. 
2. 
3. 

[micahmj11 Friend micahmj11Join date: January 2012Posts: 14Downloads:9Uploads:3 Thanks: 4]

#542503

Any advice on this?

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

#542792

The block where the banner image located is hidden in the small screen view port. You can applied my suggestion as above again and add some css rule to show this banner. Here is my workaround:

– Apply above change for LESS and compile LESS to CSS
– Create a new css file called custom.css in this path: /templates/ja_playmag/css/
– Add this css rule:

@media screen and (min-width: 768px) and (max-width: 1025px) {
.t3-topbar .hidden-xs {
display: block !important;
}
}


1 user says Thank You to Saguaros for this useful post

1. micahmj11

[micahmj11 Friend micahmj11Join date: January 2012Posts: 14Downloads:9Uploads:3 Thanks: 4]

#542903

Thank you. That did the trick. 🙂

[Author]

Posts