Joomla Templates Club 406,261 posts

[mambo.ir Friend mambo.irJoin date: February 2006Posts: 27Downloads:0Uploads:5 Thanks: 12 Thanked: 1 times in 1 posts]

#195513

Hello

How to active sticky top Menu navigation in JA Bookshop template?

Thank You

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

#525516

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

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

#525622

@mambo.ir,

Please try workaround below:

– Open the file: /templates/your_template_name/tpls/blocks/header.php, then add syntax in red:

<header id="t3-header" class="wrap t3-header" data-spy="affix" data-offset-top="60">

– Create a new file called “custom.css” in the /templates/your_template_name/ path, then add this rule:

.t3-header.affix {
position: fixed;
width: 100%;
z-index: 1030;
top: 0;
}

Let me know if this helps.

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

1. mambo.ir
2. sebbs

[mambo.ir Friend mambo.irJoin date: February 2006Posts: 27Downloads:0Uploads:5 Thanks: 12 Thanked: 1 times in 1 posts]

#526426

<em>@Nazario A 415002 wrote:</em><blockquote>@mambo.ir,

Please try workaround below:

– Open the file: /templates/your_template_name/tpls/blocks/header.php, then add syntax in red:

<header id="t3-header" class="wrap t3-header" data-spy="affix" data-offset-top="60">

– Create a new file called “custom.css” in the /templates/your_template_name/ path, then add this rule:

.t3-header.affix {
position: fixed;
width: 100%;
z-index: 1030;
top: 0;
}

Let me know if this helps.</blockquote>

Thank You for answer.
I also have another question, How to active sticky toolbar in JA Bookshop template?

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

#526590

@mambo.ir,

Please open file /templates/your_template_name/css/custom.css then find and replace this code:

.t3-header.affix {
position: fixed;
width: 100%;
z-index: 1030;
top: 0;
}
With:

.t3-header.affix {
position: fixed;
width: 100%;
z-index: 1030;
top: 40px;
}
#toolbar {
position: fixed;
top: 0;
width: 100%;
}
.t3-wrapper {
top: 120px;
}

Let me know if this helps

[mambo.ir Friend mambo.irJoin date: February 2006Posts: 27Downloads:0Uploads:5 Thanks: 12 Thanked: 1 times in 1 posts]

#526827

Hello

1-after adding your code we have free space, how to fix it? (see the attachment)
2-if i want to just sticky toolbar what can i do and change?

Thank You

---

Attachments:

1. 

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

#526927

@mambo.ir,

<blockquote>1-after adding your code we have free space, how to fix it? (see the attachment)</blockquote>
Please open the /templates/your_template_name/tpls/blocks/header.php file, then remove the declaration in red:

<header id="t3-header" class="wrap t3-header" data-spy="affix" data-offset-top="60">

<blockquote>2-if i want to just sticky toolbar what can i do and change?</blockquote>

You mean to have sticky toolbar as in this screenshot?

Please open the file: /templates/your_template_name/css/custom.css then replace this code:

.t3-header.affix {
position: fixed;
width: 100%;
z-index: 1030;
top: 40px;
}
#toolbar {
position: fixed;
top: 0;
width: 100%;
}
.t3-wrapper {
top: 120px;
}

With:

#toolbar {
position: fixed;
top: 0;
width: 100%;
}
.t3-wrapper {
top: 40px;
}

Let me know if this helps.

---

Attachments:

1. 

1 user says Thank You to Nazario A for this useful post

1. mambo.ir

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530413

Need a little help! … followed all the steps and it works great however I’m off somewhere and not sure where …

site: http://baico.dev.dnsnetworks.ca/

this is what I added in my custom.css

.t3-header.affix {
position: fixed;
width: 100%;
z-index: 1030;
top: 40px;
}

#toolbar {
position: fixed;
top: 0;
width: 100%;
}
.t3-wrapper {
top: 40px;
}

and this is in my header.php

<header id=”t3-header” class=”wrap t3-header” data-spy=”affix” >

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

#530415

<em>@sebbs 421098 wrote:</em><blockquote>Need a little help! … followed all the steps and it works great however I’m off somewhere and not sure where …
</blockquote>

What/Which elements are you seeing as being “off?”

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530417

<em>@TomC 421100 wrote:</em><blockquote>What/Which elements are you seeing as being “off?”</blockquote>

This is how I see the site when I load the page… two things are happening… the menu items are overlapping the black banner… and the slider module and today highlights or tucked under the menu … they need to come down… do you see that?

See image:

---

Attachments:

1. 

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

#530418

As for the main nav overlap issue, add the following to your custom.css file . . .


.t3-mainnav .t3-navbar {
margin-top: 5px;
}

See if that resolves the issue for you.

1 user says Thank You to TomC for this useful post

1. sebbs

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

#530422

As for the top spotlight block overlap issue, try adding the following to your custom.css file:


.t3-spotlight {
margin-top: 130px;
}

Resolve the issue appropriately?

1 user says Thank You to TomC for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530423

<em>@TomC 421104 wrote:</em><blockquote>

See if that resolves the issue for you.</blockquote>

It did … but now I think there’s too much space above the menu items… can we lessen the space?
http://baico.dev.dnsnetworks.ca/

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

#530424

<em>@sebbs 421109 wrote:</em><blockquote>It did … but now I think there’s too much space above the menu items… can we lessen the space?
http://baico.dev.dnsnetworks.ca/</blockquote>

Of course …. simply modify the pixel value to 4px, or 3px … of whatever value ends up looking best to you.

😎

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530425

<em>@TomC 421108 wrote:</em><blockquote>As for the top spotlight block overlap issue ….

Resolve the issue appropriately?</blockquote>

Yes it absolutely did!!!

[Author]

Posts