Joomla Templates Club 406,261 posts

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#209174

Pretty simple cause to this problem – I have uploaded a logo image that appears to be too large for the space allocated to it. As a result, the menu cannot be clicked on to move through the site.

The obvious solution is “use a smaller logo, dummy” but is there any way to adjust the code to make the menu appear on a new row or allocate less space to it? Float them together, rather than put arbitrary content into a grid that is too small for it?

Playing with Firebug I resolved the issue by increasing the columns for logo to 7. But the columns don’t add up after that, and I’m not sure where I go to hard-code this override. I did not find anywhere in the template config settings to fix it either.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#578455

Here’s something you could try . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_charity/css/

Within that custom.css file, paste the following CSS rule:


.t3-mainnav {
top: 125px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#644746

Here’s something you could try . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_charity/css/

Within that custom.css file, paste the following CSS rule:


.t3-mainnav {
top: 125px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#743377

Here’s something you could try . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_charity/css/

Within that custom.css file, paste the following CSS rule:


.t3-mainnav {
top: 125px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#578456

<em>@TomC 484447 wrote:</em><blockquote>Here’s something you could try . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_charity/css/

Within that custom.css file, paste the following CSS rule:


.t3-mainnav {
top: 125px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??</blockquote>

It kind of works. Part of the menu (the top of the text) is still covered by the logo link. You can read the text fine but part of it is not clickable. Which for me is fine, but unacceptable to put out as work for this client.

I feel like the proper approach would be changing the image div to have more columns and put the menu in a new row. But I am unfamiliar with how to do this in JA templates, as an override or another method.

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#644747

<em>@TomC 484447 wrote:</em><blockquote>Here’s something you could try . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_charity/css/

Within that custom.css file, paste the following CSS rule:


.t3-mainnav {
top: 125px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??</blockquote>

It kind of works. Part of the menu (the top of the text) is still covered by the logo link. You can read the text fine but part of it is not clickable. Which for me is fine, but unacceptable to put out as work for this client.

I feel like the proper approach would be changing the image div to have more columns and put the menu in a new row. But I am unfamiliar with how to do this in JA templates, as an override or another method.

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#743378

<em>@TomC 484447 wrote:</em><blockquote>Here’s something you could try . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_charity/css/

Within that custom.css file, paste the following CSS rule:


.t3-mainnav {
top: 125px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??</blockquote>

It kind of works. Part of the menu (the top of the text) is still covered by the logo link. You can read the text fine but part of it is not clickable. Which for me is fine, but unacceptable to put out as work for this client.

I feel like the proper approach would be changing the image div to have more columns and put the menu in a new row. But I am unfamiliar with how to do this in JA templates, as an override or another method.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#578458

You could increase the height of the header section and use a greater pixel value for the “top” property in the above CSS suggestion.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#644749

You could increase the height of the header section and use a greater pixel value for the “top” property in the above CSS suggestion.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#743380

You could increase the height of the header section and use a greater pixel value for the “top” property in the above CSS suggestion.

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#578460

<em>@TomC 484450 wrote:</em><blockquote>You could increase the height of the header section and use a greater pixel value for the “top” property in the above CSS suggestion.</blockquote>

Thanks for the suggestion, Tom. Yeah, I could but then aren’t there issues with smaller resolutions? It pushes the menu block below the logo automatically on smaller sizes, and then 125px down over the next section?

There has to be a better way. Has no one ever used a logo that filled more than 2 columns worth of the grid? If my menu only has 4 items, why does it need to take up 9 columns? Etc..

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#644751

<em>@TomC 484450 wrote:</em><blockquote>You could increase the height of the header section and use a greater pixel value for the “top” property in the above CSS suggestion.</blockquote>

Thanks for the suggestion, Tom. Yeah, I could but then aren’t there issues with smaller resolutions? It pushes the menu block below the logo automatically on smaller sizes, and then 125px down over the next section?

There has to be a better way. Has no one ever used a logo that filled more than 2 columns worth of the grid? If my menu only has 4 items, why does it need to take up 9 columns? Etc..

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#743382

<em>@TomC 484450 wrote:</em><blockquote>You could increase the height of the header section and use a greater pixel value for the “top” property in the above CSS suggestion.</blockquote>

Thanks for the suggestion, Tom. Yeah, I could but then aren’t there issues with smaller resolutions? It pushes the menu block below the logo automatically on smaller sizes, and then 125px down over the next section?

There has to be a better way. Has no one ever used a logo that filled more than 2 columns worth of the grid? If my menu only has 4 items, why does it need to take up 9 columns? Etc..

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#578480

Hi jdockum,

This template is based on T3 framework which implement Bootstrap grid system. By default, the logo takes 2 grids and 9 grids for the menu.

In your case specific, you will need to change the Grid class to suit your need.

Just go to file: root/templates/ja_charity/tpls/blocks/header.php and change in 2 places like below:
– At approx line 41:


<!-- LOGO -->
<div class="col-xs-6 col-lg-2 logo">

change to:


<!-- LOGO -->
<div class="col-xs-6 col-lg-6 logo">


– At line 95:


<div class="col-sm-12 col-lg-9">
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">


replace it with:

<div class="col-sm-12 col-lg-5">
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">

And pls remove css suggested by TomC as above

In case that you want to style for the menu and don’t want it affect view in smaller screen size, you can use media queries, for example:

@media (min-width: 992px) {
.t3-mainnav {
top: 5px;
}
}


this will apply into screen larger than 992px (desktop view) only.

1 user says Thank You to Saguaros for this useful post

1. jdockum

[jdockum Friend jdockumJoin date: June 2015Posts: 19Downloads:9Uploads:7 Thanks: 8 Thanked: 1 times in 1 posts]

#578568

<em>@Saguaros 484476 wrote:</em><blockquote>Hi jdockum,

This template is based on T3 framework which implement Bootstrap grid system. By default, the logo takes 2 grids and 9 grids for the menu.

In your case specific, you will need to change the Grid class to suit your need.

Just go to file: root/templates/ja_charity/tpls/blocks/header.php and change in 2 places like below:
– At approx line 41:


<!-- LOGO -->
<div class="col-xs-6 col-lg-2 logo">

change to:


<!-- LOGO -->
<div class="col-xs-6 col-lg-6 logo">


– At line 95:


<div class="col-sm-12 col-lg-9">
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">


replace it with:

<div class="col-sm-12 col-lg-5">
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">

And pls remove css suggested by TomC as above

In case that you want to style for the menu and don’t want it affect view in smaller screen size, you can use media queries, for example:

@media (min-width: 992px) {
.t3-mainnav {
top: 5px;
}
}


this will apply into screen larger than 992px (desktop view) only.</blockquote>

Thank you! Will this change be overwritten by template updates? I may actually adjust the rows/columns even more but knowing where to find the code and override it is helpful.

[Author]

Posts