Joomla Templates Club 406,261 posts

[mysterion Friend mysterionJoin date: September 2006Posts: 16Downloads:3Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#182027

Hi,
Brisk looks and works pretty well from what I can see but the header area is causing me 2 small problems:

1. TOP NAV
My top menu is a little longer than the demo example, so I’ve disabled the search (top right) and want to align top nav to the right (for more space).What is the best way to achieve this without damaging responsive behaviour?

& related…

2. LOGO WIDTH
Most logos will be wider than the demo example I think. I’ve added a logo of 200px wide but it behaves poorly when the browser is resized. Again what is the best way to allow for a wider logo?

Many thanks

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#472242

<em>@mysterion 345222 wrote:</em><blockquote>Hi,
Brisk looks and works pretty well from what I can see but the header area is causing me 2 small problems:

1. TOP NAV
My top menu is a little longer than the demo example, so I’ve disabled the search (top right) and want to align top nav to the right (for more space).What is the best way to achieve this without damaging responsive behaviour?

& related…

2. LOGO WIDTH
Most logos will be wider than the demo example I think. I’ve added a logo of 200px wide but it behaves poorly when the browser is resized. Again what is the best way to allow for a wider logo?

Many thanks</blockquote>

1. Yes, you can disable the search in top right, it won’t harm to Brisk’s Layout.

2. You can use another image Logo for mobile, then add style for mobile logo.

[mysterion Friend mysterionJoin date: September 2006Posts: 16Downloads:3Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#472260

1. I have already disabled search but the position doesn’t collapse – it’s still holding its width with nothing in it.

2. I have already changed the logo but the responsive CSS is set up for a much smaller logo

Can anyone help with these?

[mysterion Friend mysterionJoin date: September 2006Posts: 16Downloads:3Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#472400

Here’s my issue. I can fix this in CSS but it messes up the responsive resizing of the header area. How do I sort this?

---

Attachments:

1. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#472403

<em>@mysterion 345503 wrote:</em><blockquote>

Here’s my issue. I can fix this in CSS but it messes up the responsive resizing of the header area. How do I sort this?</blockquote>

I try to learn so I’ve had a play with this and come to some solution – whether it is the right one, who knows!!

So, don’t trust me and make sure you back up any files that I changed. Risk is on your side!!

Firstly I deleted the search out the header-php file BUT that still leaves the layout looking like this

You do not have to do this – it works without hacking header.php – just ensure that search is not published.

So, looking at the css there are various places you need to edit.

for desktop – template-responsive.css line 38

.span8 {width: 608px;
float: right; < add this
}


for responsive – bootstrap-responsive.css line 82

.span8 {width: 628px;
float: right; < add this
}

for smaller responsive you also need to go to bootstrap-responsive.css line 407

.span8 {width: 484px; < on a virgin brisk I had to increase this to 523px to get the menü on one line
float: right; < add this
}

I have NO IDEA if adjusting .span8 is going to affect the rest of the template. Would love to hear if it does or not!

Like you, I’m fumbling my way around at the moment!! 😀

---

Attachments:

1. 

1 user says Thank You to swissa for this useful post

1. mysterion

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#472404

<em>@swissa 345507 wrote:</em><blockquote>
I have NO IDEA if adjusting .span8 is going to affect the rest of the template. Would love to hear if it does or not!
</blockquote>

It will. :(( :-[

So don’t use this method!

[mysterion Friend mysterionJoin date: September 2006Posts: 16Downloads:3Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#472405

Aww – great try Swissea 🙂

On a normal template this fix would be easy but this is really tricky. Many thanks for your efforts!

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#472408

<em>@mysterion 345513 wrote:</em><blockquote>Aww – great try Swissea 🙂

On a normal template this fix would be easy but this is really tricky. Many thanks for your efforts!</blockquote>
All a learning process!

Actually this worked for me!

/templates/ja_brisk/css/template.css line 985

.ja-mainnav {
float: right;
height: 28px;
margin-right: -120px; < edited from 20px
padding-top: 10px;
}

for responsive
templates/ja_brisk/css/template-responsive.css – line 721

.ja-mainnav {
float: right; < add this
}

(it will push the dropdown menü on a small device to the right not next to the logo) try it in chrome developer before going ‘live’…….

1 user says Thank You to swissa for this useful post

1. JA Developer

[mysterion Friend mysterionJoin date: September 2006Posts: 16Downloads:3Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#472418

Nice work – the negative margin works well I think. Still a little distorted when reduced (particularly because my logo is wider than defualt) but this solution will do me.
Many thanks Swissa!

[luke66 Friend luke66Join date: June 2011Posts: 15Downloads:0Uploads:7 Thanks: 2 Thanked: 2 times in 1 posts]

#472670

I had the same problem. However, for me I cannot reclaim the search module space. The menu remains crowded towards the logo.

---

Attachments:

1. 

[mysterion Friend mysterionJoin date: September 2006Posts: 16Downloads:3Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#472676

Hi Luke,

You need to comment out or delete the search ffrom the header php file or if this is too complex, find the search container div and set it to display:none; in the CSS.

1 user says Thank You to mysterion for this useful post

1. swissa

[luke66 Friend luke66Join date: June 2011Posts: 15Downloads:0Uploads:7 Thanks: 2 Thanked: 2 times in 1 posts]

#472738

Thanks Mysterion for the advise.

<em>@mysterion 345888 wrote:</em><blockquote>Hi Luke,

You need to comment out or delete the search ffrom the header php file or if this is too complex, find the search container div and set it to display:none; in the CSS.</blockquote>

I have deleted the following from “/templates/ja_brisk/tpls/blocks/header.php” with no luck:

<div class="span2">
<?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="head-search">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>
</div>

I also have modified “ja-mainnav” tag right margin to -120px as suggested elsewhere in this thread in “/templates/ja_brisk/css/template.css” and still no luck!

The positions configuration on the template layout look like this after deleting the search-head section from header.php:

Any suggestions?

Thanks

---

Attachments:

1. 

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#472766

<em>@luke66 345880 wrote:</em><blockquote>I had the same problem. However, for me I cannot reclaim the search module space. The menu remains crowded towards the logo.
</blockquote>
Please go to
templates/ja_brisk/css/custom.css

and add these lines:

#ja-header .span2{
width:0;
}
#ja-header .span8{
float: right;
}


Please edit in file custom.css to avoid override template after compile Less.

1 user says Thank You to Luna Garden for this useful post

1. myuption

[mysterion Friend mysterionJoin date: September 2006Posts: 16Downloads:3Uploads:1 Thanks: 5 Thanked: 2 times in 1 posts]

#472775

Gosh Luke – that didn’t work? Swissa’s fix worked perfectly for me. I’m sure you are very close – I don’t suppose you have a URL for us to look at?

1 user says Thank You to mysterion for this useful post

1. luke66

[luke66 Friend luke66Join date: June 2011Posts: 15Downloads:0Uploads:7 Thanks: 2 Thanked: 2 times in 1 posts]

#472781

Thanks for your help Mysterion. I had to use Firebug to track down the problem and it pointed me to the file /templates/ja_brisk/less/navigation.less. Around line 205 I had to change this:

.ja-mainnav {
float: right;
height: @navbarHeight - 2px; //Minus the border
margin-right: @BaseLineHeight;
padding-top: 10px;
}

to:

.ja-mainnav {
float: right;
height: @navbarHeight - 2px; //Minus the border
/* margin-right: @BaseLineHeight; */
margin-right: -120px;
padding-top: 10px;
}

This fixed the problem, but this appears like a hack to me. It works nonetheless. Thanks.:)

[Author]

Posts