Slogan Bar Removal...

capstone2

I'm wondering if the blue Slogan bar on the left side can be removed. I disabled the module but can't find a way to make it disappear. I'd really like it relocated to the top of the page behind the main menu bar....

Thank you!

Brian

saguaros

Hi Brian,

You can try this custom css code:

.horizontal-nav {
    position: relative !important;
    display: flex !important;
    height: auto !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    max-height: 54px !important;
    width: 100% !important;
}

.t4-content {
    padding-left: 0 !important;
}

.acm-social.style-1 .social-follow {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

.acm-social.style-1 .social-follow .social-inner {
    margin-left: 2.286rem !important;
    margin-top: 3rem !important;
}

.t4-header .header-block {
    z-index: 9999;
}

capstone2

That works great! Thank you very much.

My new problem is that the navigation menu at the top is almost invisible. How can I add a background to it and change the font size and color? I see the main nav css under template styles but I am unsure what to edit to get to where I want to be...

saguaros

It looks like you sorted it out, right?

Let me know if you need further help on this.

capstone2

As always, thank you for your help! I think that we're going to go with a different template which will be more traditional for the user.

saguaros

capstone2 My pleasure, if you're in need of any help, just let me know 🙂

capstone2

I guess we are sticking with this template, saguaros. Can I totally disable the blue bar?

saguaros

Yes, you can use this custom css to hide it:

.t4-header .horizontal-nav {
    display: none !important;
}

capstone2

That definitely took care of the bar, but now I have this

I guess what I am trying to accomplish on the home page is just none of the nav bars or blue areas, just content....

Thank you very much for your help and patience!

dominic

Hi capstone2,
I've reviewed your site and it appears to be in good shape now. Has the reported issue been resolved?

capstone2

Thank you for checking it out. Still having the issue on desktop...

dominic

Hi capstone2,
After review, it appears that if you utilize a screen larger than 1920px, the template's maximum width is set at 1920px.
To improve this issue, you can add this CSS code to your site:

@media (min-width: 1920.99px) {
html body {
    background: #fff;
}
.t4-content {
    margin: 0 auto;
}
}

Hope this helps!

capstone2

Thank you dominic! That took care of it. I appreciate your help!

saguaros

Let us know if you need any further assistance 😉

capstone2

Hello again!

Is there a way to make the template use all the available space in the browser window while remaining responsive?
As always, thank you for your help and patience!
Brian

dominic

Hi capstone2,
You can go to the backend > site template styles > your templates > Layout settings > Row configuration and select the Fluid option.

capstone2

dominic, thank you for getting back with me so quickly!
I did that and it didn't seem to have any effect. I did it on every section including nav
Of course, there's always the very real possibility that I am not understanding something about the capabilities of Joomla and am asking for something that isn't possible.

I made this post private since it shows the company that I am working on this site for.

I appreciate all of your time and assistance!
Brian

dominic

Hi capstone2,
You can use the CSS code:

.t4-content {
    padding-left: 0; 
    max-width: 100%; 
}

capstone2

Perfect!

Thank you very much for your help!