Joomla Templates Club 406,261 posts

[paocuba Friend paocubaJoin date: August 2010Posts: 3Downloads:0Uploads:2 Thanks: 2]

#203520

I try to create a website that has a top-header block on the block menu. That top-header block contains language, social and login, similar to Biz template but with full width.

Attached is a reference image. I’m developing locally yet so I do not have a URL.

I try to Purity template and the Blanck_b3, but had no success. I also review the documentation Biz template to find a reference, If anyone can help me I would greatly appreciate it.

---

Attachments:

1. 

[bwebdesign Friend bwebdesignJoin date: December 2014Posts: 36Downloads:0Uploads:1 Thanks: 4 Thanked: 6 times in 3 posts]

#558530

Can you use Inspect element in your browser? That’s a handy tool to use . Than you can look up the problem. I think it is a problem with the margins. Or width the Css width. You have to edit the element style. It is possible that the margin-right is 20px and that’s why it isn’t the full width than you have to change 20px to 0px or that the element style is width: 800px than you have to edit 800px to 100%

I think you have to edit .containter
You can make a custom.css file in the css folder of your template and place this:

@media (min-width: 1200px)
.container {
width: 100%;
} @media (min-width: 992px)
.container {
width: 100%;
} @media (min-width: 768px)
.container {
width: 100%;
}

Or you can edit it in the file where the code is placed (i think in bootstrap.css)

1 user says Thank You to bwebdesign for this useful post

1. paocuba

[paocuba Friend paocubaJoin date: August 2010Posts: 3Downloads:0Uploads:2 Thanks: 2]

#558544

Here is the alternative I use, based on the recommendation of bwebdesign.

His recommendation was correct, I just need to adjust to my request. I did not want to expand the contents of the three blocks, why not change the container class but the class t3-top-header found in the top-header.php block having the following structure.

<div id="top-header" class=" t3-top-header">
<div class="row">
<div class="container">
<div class="main-container">
...
</div>
</div>
</div>
</div>

Then add the following to style.less file

// TOP HEADER
// ---------------------------------------------------------
.t3-top-header {
width: 100%;
background: @t3-topheader-background;
.container {
color: @t3-topheader-text-color;
min-height: 40px;
position: relative;
z-index: 300;
}
.main-container {
position: relative;
@media screen and (max-width: @screen-sm-max) {
width: 100%;
}
}

Now works properly. I take the decision to continue development of the site with the t3_b3_blank template, think it is more practical to build on that basis to modify the Biz template for what I want.

[Author]

Posts