Force true full-width topbar

gribblej

We are inches away from launching this new site. I have a tiny but frustrating customization issue. We want to force the top bar background to a true 100%, extending all the way to the edges of the viewport. It does that on the right. But on the left it stops. You can only see this when you use a viewport width above 1500px. Normally that wouldn't be an issue. But this site, like some of your new templates, has a full-width responsive front page. It's been optimized for 1920px screens in desktop view. At higher resolutions something is adding left margin to the topbar position. I can't for the life of me see what it is when I use the inspector tools in Chrome and Firefox. I can add negative left margin but that's an ugly solution which causes other problems. I am not quite a code ninja. I thought maybe somebody would know in an instant what to do here. I'm sure it's a really simple CSS trick, if you know how the template is put together. So if anybody knows what's preventing the topbar from extending full auto 100% to the left, I would appreciate a tip. The block is configured to 100% with with a healthy Z index assigned. It should work but it doesn't.
Thank you as always to my friends at JA.
-Jim G.

saguaros

gribblej

Hi,

The thing is top bar block is being put inside the main wrap:

<div class="wrapper-hd">

You can move it outside of this div tag, it will show in full width: http://prntscr.com/ndknjs

File: [root]/templates/ja_company/tpls/default.php

gribblej

Thanks so much! In my inspectors, I could see it was this. But I tried to resolve it via CSS and it couldn't be done that way. You've identified the issue and I'm sure it will work.
-Jim Gribble

gribblej

I do appreciate the help, but this doesn't work. It is still bound by T3 wrapper. I want it to extend to infinity left and right. If I move it up to be wrapped by <body> will that accomplish what I am trying to do? Sorry that I did not make myself clear the first time. Attached is view of issue viewed on a 1992px screen.l
-Jim Gribble

aman204

gribblej Hi Jim

The topbar block is still seen to be wrapped after wrapper-hd. Ref: Screenshot due to which it is constrained within fixed width when viewing on screen size beyond 1600px.

You may make changes as suggested by @saguaros to have it span across available width

gribblej

Hey Aman,
Did make the change and it had no effect. Here's the deal. I don't want it to be constrained at all. I want it responsive--width just like the rest of the layout. The rest of the layout fills the entire screen. Just like some of your newer templates, the front page is comprised of several rows of content blocks. I use Aikon Easy Parallax and Smart Slider 3. The parallax modules are deployed in series to content-mast-top. Easy Slider uses the standard slideshow layout block at top of page. When doing full-width responsive layouts, it's important to keep in mind that 1992px is the most popular width for the cheap LCD desktop monitors which can be found in countless offices today. So our layout cannot be constrained by your 1600px limit. I see you just came out with a new template that addresses this. How do I override the available width? Move the div up so that it's not constrained by anything? Do I need to use an Aikon Easy parallax module in one of the top-bar positions and then force full width? Not the most elegant approach, but maybe would work. I did use that trick for the footer.
Go to https://milwaukee-yacht-club.com/ and view it at 1992px resolution to see the problem.
Thanks as always, I really do appreciate the responsiveness of Joomlart.
-Jim Gribble

aman204

gribblej Hi Jim

Or, You may try add this to custom.css file

.wrapper-hd{width:100% !important;}

to allow the wrapper-hd div to go full width

All JA templates have their unique and distinguishable layout construction - in order to bring in different experiences - with several templates powered by T3 framework having different layouts coming from T3 framework functionality, assigned for different menu items enabling to create personalized and mesmerizing experience for the audience 🙂

gribblej

Thank you for the proposed solution, looks promising. I hear what you're saying about every template being different. But i like to be able to transport my favorite features across templates. I also like trying out different templates, rather than use the same one over and over. They are all built on the same frame with many common basic structures despite having different layout and CSS style.
Take care,
-Jim G.

gribblej

Since responsive full-with front pages are becoming so popular, maybe you want to start to identify those templates designed to support it, as a new type of category for your template products.

aman204

gribblej Since responsive full-with front pages are becoming so popular, maybe you want to start to identify those templates designed to support it, as a new type of category for your template products.

Thanks for your suggestion. Will share this with the concerned team

Kindly let us know if all queries to relative topic have been resolved so as to mark the thread as resolved or need further assistance on the same 🙂

gribblej

I hope you do. Here's why. This customer came to me with a very specific specification for a homepage that was big and bold and "fills the screen." People are seeing it around the web and really liking it. I believe it started with WP. But I find it's just as possible to achieve in Joomla.

aman204

gribblej Sure. Can I close this thread or do you still need further assistance 🙂

gribblej

Thank you for your help, the CSS worked. Please close thread!