Main Navigation Position

Forums    Joomla Templates Club    JA Social    Main Navigation Position
Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Author
    Posts
  • testcouch Friend
    March 10, 2014 at 1:24 pm #195638

    hi, i would need your help with a important modification…the Responsive JA Social is perfect for Redesign of my current page but i would need the Main Navigation on Top Position! see my screenshot is that possible with template modifications? i know it is not a easy step, but it would helps me alot.

    1. JA-Social-Topmenu
    Saguaros Moderator
    March 11, 2014 at 2:48 am #526205

    The main navigation and the area of logo, search, top-bar, etc… belongs to 2 different blocks: mainnav and header respectively, you can consider to swap order of these 2 blocks.

    In this directory: templatesja_social_t3tpls, depend on the layout you’re using for your homepage, suppose that it’s default layout, you open file: templatesja_social_t3tplsdefault.php, then change order of 2 blocks, it will look like this:


    <body>

    <?php $this->loadBlock ('mainnav') ?>

    <?php $this->loadBlock ('header') ?>

    <?php $this->loadBlock ('spotlight-1') ?>

    <?php $this->loadBlock ('mainbody') ?>

    <?php $this->loadBlock ('spotlight-2') ?>

    <?php $this->loadBlock ('footer') ?>

    </body>

    And you will need to add additional style for this change

    testcouch Friend
    March 11, 2014 at 5:34 pm #526333

    @saguaros

    ok thanks for you help. i’v added some changes in default-left-content-right.php and added additional styles. it looks good but i get a issue with toppanel wich i could fix. see both screenshoots

    could please check my site again..

    1. Top-Panel-Closed
    2. Top-Panel-Open
    Saguaros Moderator
    March 12, 2014 at 4:48 am #526403

    If you want to achieve as in this screenshot: http://prntscr.com/302y48

    You can open the file: /templates/ja_social_t3/css/themes/widelayout/mod_jatoppanel.css, find this CSS rule:


    #ja-top-panel {
    border-top: 1px solid #33ABD7
    position: absolute !important;
    top: 29px;
    width: 100%;
    z-index: 16;
    }

    change it to:


    #ja-top-panel {
    border-top: 1px solid #33ABD7
    position: inherit !important;
    top: 29px;
    width: 100%;
    z-index: 17;
    }

    testcouch Friend
    March 12, 2014 at 12:46 pm #526476

    @saguaros

    thanks for your help..i’v added your changes but the toppanel (closed) is not in that position like your screenshot and toppanel (open) is also still the same like my second screenshot.

    Saguaros Moderator
    March 13, 2014 at 7:47 am #526564

    Could you send me screenshot of how it should be when the top panel opens?

    testcouch Friend
    March 13, 2014 at 2:27 pm #526607

    <em>@Saguaros 416161 wrote:</em><blockquote>Could you send me screenshot of how it should be when the top panel opens?</blockquote>
    Top Panel Content should be blue and not transparent!

    Top Panel width is also not Responsive on Mobile. i see currently a transparent Panel Content and Panel wich is not Responsive on iPhone Mobile!

    Toppanel closed Button should also on top if i slide on mobile iphone.

    Toppanel closed Button should look on PC like in your screenshot:

    but i get still a gap with firefox:

    1. image
    2. Toppanel
    Saguaros Moderator
    March 14, 2014 at 2:41 am #526654

    In backend settings of this JA Top Panel module, there is an option called ‘Transparency for Top Panel‘, pls set it to No.

    In mobile view, we hide this module by default as it will not look nice in such small screen devices, you can confirm the same in our demo site.

    With the closed button in PC, you can open the file: /templates/ja_social_t3/css/custom.css

    and add this CSS rule:

    @media (min-width: 981px) {
    #ja-top-panel {
    top: 0 !important;
    }
    }

    testcouch Friend
    March 14, 2014 at 12:30 pm #526736

    <em>@Saguaros 416276 wrote:</em><blockquote>In backend settings of this JA Top Panel module, there is an option called ‘Transparency for Top Panel‘, pls set it to No.</blockquote>
    on joomla 2.5.19 i can’t see settings:

    <em>@Saguaros 416276 wrote:</em><blockquote>
    In mobile view, we hide this module by default as it will not look nice in such small screen devices, you can confirm the same in our demo site. </blockquote>
    that would be the easiest way for now but not realy a fix 😉

    <em>@Saguaros 416276 wrote:</em><blockquote>
    With the closed button in PC, you can open the file: /templates/ja_social_t3/css/custom.css

    and add this CSS rule:

    @media (min-width: 981px) {
    #ja-top-panel {
    top: 0 !important;
    }
    }

    </blockquote>

    many thanks that works good!

    i get also style issues with ja topbar:

    1. View on PC

    2. View on Mobile

    since ja topbar is not show on mobile view i’m missing a space between nav and module,content..

    Off-Canvas Menu and Nav Bar is also very small on mobile devices..compared with other ja templates.

    1. JA-Toppanel
    2. JA-Topbar
    3. JA-Toppanel-Mobile
    Saguaros Moderator
    March 17, 2014 at 10:03 am #526940

    If you want to move that button to the left side, you can add additional CSS rule into rule above:

    @media (min-width: 981px) {
    #ja-top-panel {
    top: 0 !important;
    }

    .ja-toppanel-mainwrap {
    left: -100px;
    }
    }

    You can change to the value at your choice.

    With the missing space in mobile view, you can add this css rule:

    @media (max-width: 360px) {
    padding: 0;
    }

    For the button, actually we use default icon of Bootstrap. Open this file: /templates/ja_social_t3/css/themes/widelayout/bootstrap.css, at approx line 2554, you will see how we define it:


    .icon-reorder:before {
    content: "f0c9";
    }

    testcouch Friend
    March 17, 2014 at 3:03 pm #526999

    <em>@Saguaros 416646 wrote:</em><blockquote>With the missing space in mobile view, you can add this css rule:

    @media (max-width: 360px) {
    padding: 0;
    }

    </blockquote>

    sorry, but your css rule for missing space in mobile views does not work for me in my custom.css.
    any other idea how i get same space between mainnav and content/modules for all layouts?

    ————————————————————————————————————————————–

    <em>@Saguaros 416646 wrote:</em><blockquote>For the button, actually we use default icon of Bootstrap. Open this file: /templates/ja_social_t3/css/themes/widelayout/bootstrap.css, at approx line 2554, you will see how we define it:


    .icon-reorder:before {
    content: "f0c9";
    }

    </blockquote>

    thanks for that but how can i add a bigger off-canvas button and give also ja-mainnav more height on mobile layouts? see screenshot:

    old:

    new:

    1. off-canvas-mobile
    2. off-canvas-mobile-old
    Saguaros Moderator
    March 18, 2014 at 3:29 pm #527187

    Oops! I missed the class in the code above, please change it to:

    @media (max-width: 360px) {
    .t3-content .main-content-inner {
    padding: 0 20px;
    }
    }

    testcouch Friend
    March 19, 2014 at 1:19 pm #527348

    <em>@Saguaros 416953 wrote:</em><blockquote>Oops! I missed the class in the code above, please change it to:

    @media (max-width: 360px) {
    .t3-content .main-content-inner {
    padding: 0 20px;
    }
    }

    </blockquote>

    i’v added your css in custom.css but i get still no space between mainnav and content or module.

    please check also the off-canvas button and nav height issue from here: http://www.joomlart.com/forums/topic/main-navigation-position/#post-526999

    Saguaros Moderator
    March 20, 2014 at 2:27 am #527398

    I’m sorry for mis-understanding your request, if you want to have more space between the mainnav and the content, pls try to remove code above and replace with this:

    @media (max-width: 360px) {
    .t3-mainbody {
    padding-top: 40px;
    }
    }

    testcouch Friend
    March 25, 2014 at 4:22 pm #528079

    <em>@Saguaros 417218 wrote:</em><blockquote>I’m sorry for mis-understanding your request, if you want to have more space between the mainnav and the content, pls try to remove code above and replace with this:

    @media (max-width: 360px) {
    .t3-mainbody {
    padding-top: 40px;
    }
    }

    </blockquote>

    many thanks..i get now a space between the mainnav and content/component/modules, but this space has a different height on different browser width! why is that?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 17 total)
1 2

This topic contains 17 replies, has 2 voices, and was last updated by  testcouch 10 years, 8 months ago.

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

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories