Joomla Templates Club 406,261 posts

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1001281

Hi,

Is it possible to have the menu/navbar full width?
Please see attached screenshot – We want the menu to cover the areas highlighted in yellow.

Please advise.

Thank you

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1001286

Hi Add below code in custom.css

.t3-header . container {width:100%}

And open /tpls/feaure-intro.php and remove the main-container class.
Hope it helps

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1001313

Hi,

I’ve added the code provided into custom.css which has widened the navbar, but it hasn’t made it full width right across.

If I remove the "main-container" class from feature-intro.php it doesn’t display anything on the homepage, so I’ve put the "main-container" class back for now.

To clarify, we just want the translucent background to continue into the yellow areas highlighted in the previous screenshot.

Please advise.

Many thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1001426

Hi Becuase the main container width is defined the header does not 100% width. Try this open /tpls/features-intro.php file Find

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

And paste it above the main container http://prntscr.com/du29of
Add below code in custom.css

#t3-header {
    width: 100%;
    }

Hope it helps.

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1001583

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1001711

Hi
if you want to apply the same for default layout, You have to apply the same changes in the tpls/default.php
Cut the header code and paste it above main container.
Here :http://prntscr.com/duiztz
Hope it helps.

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1001782

Thanks @pankaj,

This has made the navbar full width on the other pages.

I’ve added the following code to custom.css

#t3-header {
    padding-left: 110px;
    padding-right: 110px;
}

Which makes the header display well when viewing on a full size desktop monitor, but not so well when it’s resized down to tablet or mobile view.

Is it possible to add some a line for "@media max-width:" ?

Thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1001784

Hi
Use below code to add media query

@media (min-width:992px){ #t3-header {
    padding-left: 110px;
    padding-right: 110px;
}}

This work till screen size is 992px.
Regards

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1002092

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1002124

Hi
Its becuaase of this code in custom.css file

    #t3-header {
    width: 100%;
    padding-left: 160px;
    padding-right: 160px;
    }

You have to apply same code on this.

@media(min-width:992px){    #t3-header {
    width: 100%;
    padding-left: 160px;
    padding-right: 160px;
    }}

[Author]

Posts