Public Forums 71,145 posts

[deanperry Friend deanperryJoin date: May 2008Posts: 12Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#199567

I have been setting up a new site and loving JA Purity iii.
I am trying to work out the best / most efficient way to display the red banner on the site, preferably on a red background as I have it.
However, I want the header image to scale for iPad/iPhone view.
I have previously been able to achieve a similar outcome with JA Elastica but can’t seem to translate that knowledge across to JA Purity iii.
This is the site – showing both the masthead and also small logo in the menu. I want one or the other!

http://stephenjollyforrichmond.com/beta/fighting-for-issues-that-matter/stop-the-east-west-toll-road

Can one of you learned folk point me in the right direction?

Thanks in anticipation!

[deanperry Friend deanperryJoin date: May 2008Posts: 12Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#541861

OK, I’ve managed to get the logo resizing above the menu but I still have 2 issues:
1. I would like red either side of the logo itself, above the menu
2. I need it not to overlap the menu below when the screen gets smaller

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#541976

@deanperry,

Please open file: /templates/your_template_name/css/custom.css (if not exists, pls create new one) then add this rule:

/* Custom header */
.wrap.navbar.navbar-default.t3-mainnav {
background: red;
}
.t3-navbar.navbar-collapse.collapse {
width: 100%;
background: black;
}
.logo-image > a > img {
width: 100%
}

/* On Small Screen*/
@media (min-width: 320px) and (max-width: 990px) {
.navbar {
min-height: 0;
}
.logo {
position: static;
}
}


Let me know if this helps

2 users say Thank You to Nazario A for this useful post

1. deanperry
2. timheel

[deanperry Friend deanperryJoin date: May 2008Posts: 12Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#541983

Fixed it myself. Ended up being best solved by adjusting the div to “col-md-12” and adding “max-width:100%” etc
<div class=”jumbotron jumbotron-primary masthead”>
<div class=”col-md-12″ align=”left”>
<p><img src=”images/header.png” alt=”” border=”0″ style=”max-width:100%;height:auto;”/></p>
</div>
</div>

1 user says Thank You to deanperry for this useful post

1. timheel

[thatoo Friend thatooJoin date: August 2014Posts: 19Downloads:0Uploads:4 Thanks: 3]

#547999

<em>@deanperry 436066 wrote:</em><blockquote>OK, I’ve managed to get the logo resizing above the menu but I still have 2 issues:
1. I would like red either side of the logo itself, above the menu
2. I need it not to overlap the menu below when the screen gets smaller</blockquote>

could you make a tuto to explain how you manage to put the logo on the top of the menu and to make it responsive? Please.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#548069

@thatoo: I see the request from @deanperry and you are difference, look at the screenshot: http://stephenjollyforrichmond.com/

Can you give me the URL of your site and screenshot with description on it? I will help you to check it further.

[thatoo Friend thatooJoin date: August 2014Posts: 19Downloads:0Uploads:4 Thanks: 3]

#548103

No, this result would be good for me. Except for the red color 🙂
He has a banner, centred on the top of his page, and it’s responsive. Perfect.
My website is http://www.ecoleworldycamino.org. However, I’m trying also a solution with the logo and css, and for that someone else is helping me.
I don’t know what is best, use the logo and css or delete the logo solution and add a picture on the top. I’m trying on localhost on my computer.

[thatoo Friend thatooJoin date: August 2014Posts: 19Downloads:0Uploads:4 Thanks: 3]

#548137

It’s ok, I found the solution for this way, putting an image on top of the main menu, centre it and make it responsive.
I had to create two new module position, allocate them two module of html code with one big and one small picture.
And what I was missing to centre it was to add
.col-sm-3 {
width : 100%
}
in custom.css

If someone whant more help, I detail more in this thread : http://www.joomlart.com/forums/topic/a-banner-above-everything/#post-548116

Good luck.

[deanperry Friend deanperryJoin date: May 2008Posts: 12Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#569190

Sorry Thatoo – for some reason I missed your question here. I must try to turn on notifications from this site

[deanperry Friend deanperryJoin date: May 2008Posts: 12Downloads:0Uploads:2 Thanks: 4 Thanked: 1 times in 1 posts]

#734279

Sorry Thatoo – for some reason I missed your question here. I must try to turn on notifications from this site

[ayamba Friend ayambaJoin date: July 2015Posts: 9Downloads:4Uploads:0 Thanks: 3]

#644933

I did apply a custom.css to customise the template for a full image logo as in http://stephenjollyforrichmond.com. Unfortunately the top of the main body goes under the masthead and navigation bar.
Really need help.
See attached image

[ayamba Friend ayambaJoin date: July 2015Posts: 9Downloads:4Uploads:0 Thanks: 3]

#743561

I did apply a custom.css to customise the template for a full image logo as in http://stephenjollyforrichmond.com. Unfortunately the top of the main body goes under the masthead and navigation bar.
Really need help.
See attached image

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#644945

@ayamba: In this case, I need to check the problem directly on your site before providing any solution, please give me the URL of your site.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#743573

@ayamba: In this case, I need to check the problem directly on your site before providing any solution, please give me the URL of your site.

[ayamba Friend ayambaJoin date: July 2015Posts: 9Downloads:4Uploads:0 Thanks: 3]

#645327

Thanks. Presently working on localhost please

[Author]

Posts