Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • airgead Friend
    #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
    #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.

    airgead Friend
    #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
    #965945

    Let us know if you need any further help.

    Have a nice day!!!

Viewing 4 posts - 1 through 4 (of 4 total)

This topic contains 3 replies, has 2 voices, and was last updated by  Saguaros 7 years, 10 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum