Joomla Templates Club 406,261 posts

[airgead Friend airgeadJoin date: September 2010Posts: 16Downloads:26Uploads:0 Thanks: 6 Thanked: 1 times in 1 posts]

#963636

Hi,

I’m building a new J 3.6.2 site for a client where their graphic designer came up with the layout. I’m using JA Brisk as that’s the closest overall for what they want. However, I need to push the menu down from the logo and stretch it to fill the width of the template. I’ve pushed the menu down so that it clears the logo by adding padding to the top of the .t3-mainnav info in the custom .css file. However I can only move the menu to the left by giving a negative left margin, which doesn’t work as the display width shrinks. Additionally, the graphic designer wants the whole template to be a little wider.

So my questions are:

1. How do I make the menu bar full width of the template?
2. How do I make the max template width bigger than 960px?

The width of the menu bar is the critical question here – if it can’t be made full width, I’ll have to start again with a new template.

Thanks in advance.

Christina Martin
Airgead Studio

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

#964180

Hi Christina Martin,

Basically, you can change the width of template via this less file: ROOT/templates/ja_brisk/less/variables.less

Look for this declaration:

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------
@T3gridWidth:             940px;  // T3 add. For non-responsive layout.
@gridColumns:             12;
@gridGutterWidth:         40px;
@gridColumnWidth:         floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@T3gridWidth1200:         960px;  // T3 add
@gridGutterWidth1200:     36px;
@gridColumnWidth1200:     floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980:          940px;  // T3 add
@gridGutterWidth980:      40px;
@gridColumnWidth980:      floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980:         (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// T3 Add: 768px-979px
@T3gridWidth768:          740px;  // T3 add
@gridGutterWidth768:      20px;
@gridColumnWidth768:      floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

and change the T3gridWidth variables as you wish.

For the main menu, it’s included in the header of template by default. The header has a container which include logo + menu + search so when you change the width as above, the width will also change.

If you want to have main menu has full width, I recommend you to separate the main menu block from the header. To do this:

• Go to file: ROOT/templates/ja_brisk/tpls/blocks/header.php
• Remove this snippet of code:

<div class="ja-mainnav span8">

<div id="t3-mainnav" class="t3-mainnav">
<div class="navbar">
<div class="navbar-inner">

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar">
<span class="icon-bar">
<span class="icon-bar">

<div class="nav-collapse collapse<?php echo $this->getParam(‘navigation_collapse_showsub’, 1) ? ‘ always-show’ : ” ?>">
<?php if ($this->getParam(‘navigation_type’) == ‘megamenu’) : ?>
<?php $this->megamenu($this->getParam(‘mm_type’, ‘mainmenu’)) ?>
<?php else : ?>
<jdoc:include type="modules" name="<?php $this->_p(‘mainnav’) ?>" style="raw" />
<?php endif ?>

• Then open the file: ROOT/templates/ja_brisk/tpls/home.php (or default.php file depend on the layout you’re using)

• Add ‘mainnav’ block so it looks like this:

  < body >
  
  <?php $this->loadBlock ('header') ?>
  
  <?php $this->loadBlock ('mainnav') ?>
  
  <?php $this->loadBlock ('slideshow') ?>
  <jdoc:include type="message" />
  <?php $this->loadBlock ('spotlight-1') ?>
  
  <?php $this->loadBlock ('spotlight-2') ?>

Now, it will load the mainnav block separately, you open this block file: ROOT/templates/ja_brisk/tpls/blocks/mainnav.php

You will see class ‘container’ there, remove it and style for this main nav as you wish.

1 user says Thank You to Saguaros for this useful post

1. airgead

[airgead Friend airgeadJoin date: September 2010Posts: 16Downloads:26Uploads:0 Thanks: 6 Thanked: 1 times in 1 posts]

#965626

Thank you for your help on this. Unfortunately I found that restyling the menu bar proved to be too time-consuming, so have switched to a t3 blank template. In hindsight, I probably should have just used that in the first place.

Regards,

Christina

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

#965945

Let us know if you need any further help.

Have a nice day!!!

[Author]

Posts