Joomla Templates Club 406,261 posts

[Walter Doljar Friend Walter DoljarJoin date: September 2014Posts: 60Downloads:75Uploads:19 Thanks: 17 Thanked: 1 times in 1 posts]

#193400

I would like to have the mainmenue (and the logo) always at the top of the screen – even when scrolling the content.

How can i fix this part of the template on the top of the screen?

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

#517173

Yes, you can try to do this way

Open templates/ja_lens/css/template.css file and add new script

#wrapper {
padding-top: 59px;
}

#header {
background: none repeat scroll 0 0 #1A1A1A;
border-bottom: 1px solid #2A2A2A;
color: #CCCCCC;
height: 59px;
position: fixed;
top: 0;
z-index: 2000;
}

2 users say Thank You to Ninja Lead for this useful post

1. Walter Doljar
2. jlrx

[Walter Doljar Friend Walter DoljarJoin date: September 2014Posts: 60Downloads:75Uploads:19 Thanks: 17 Thanked: 1 times in 1 posts]

#517287

<em>@Ninja Lead 404237 wrote:</em><blockquote>Yes, you can try to do this way

Open templates/ja_lens/css/template.css file and add new script

#wrapper {
padding-top: 59px;
}

#header {
background: none repeat scroll 0 0 #1A1A1A;
border-bottom: 1px solid #2A2A2A;
color: #CCCCCC;
height: 59px;
position: fixed;
top: 0;
z-index: 2000;
}
</blockquote>

Works well when putting it into the template.css, thank you.
BUT I would like to use an override file:

I made a custom.css, put the code into it, placed it into templates/ja_lens/css …but does not work there.
maybe I missunderstood how to work with these overrides? What´s wrong?

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

#517458

You can try my workaround below:

+ Create templates/ja_lens/css/custom.css file and add CSS rules below:


#wrapper {
padding-top: 59px;
}

#header {
background: none repeat scroll 0 0 #1A1A1A;
border-bottom: 1px solid #2A2A2A;
color: #CCCCCC;
height: 59px;
position: fixed;
top: 0;
z-index: 2000;
}


+ Open templates/ja_lens/index.php file,

Find and replace:

<!-->
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.mediaqueries.js"></script>
<!-->
With:

<!-->
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.mediaqueries.js"></script>
<!-->

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/custom.css" />

[jlrx Friend jlrxJoin date: September 2012Posts: 8Downloads:0Uploads:3 Thanks: 8 Thanked: 1 times in 1 posts]

#526857

This solution is great for making the mainmenu static. but there is a little problem:
With the pop-up menu turned on, the articles default to the top of the page, so the X of the articles is hidden by the static “mainmenu”.

Is there a way to make the article slide to the bottom of “mainmenu” instead of being hidden by it?

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

#526919

It would be great if you can include url of your site, an illustrated screenshot of what you are trying to achieve. I will help you out.

1 user says Thank You to Ninja Lead for this useful post

1. jlrx

[jlrx Friend jlrxJoin date: September 2012Posts: 8Downloads:0Uploads:3 Thanks: 8 Thanked: 1 times in 1 posts]

#526985

Thank you for your help!

In the screen capture #1 you can see that the article goes to the top when it expands (this seems to happen on Firefox, but I just realized is not always the case and in Chrome there are about 15px separation from the top).

After using your code and making ‘mainmenu’ static, When I click on a photograph and the article expands-> the [X] close and scrollbar hide behind the ‘mainmenu’.

The question is: is there a way to make the articles go to about 60px from the top when it expands, just below the static ‘mainmenu’?
Like this:

One again, thanks for your help!

---

Attachments:

1. 
2. 
3. 

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

#527157

My workaround above is a hack into the css file on JA Lens Template.

I tried to solve the problem however it needs more change from js and css file (it is using IFrame to show the popup). I’m afraid your question was rather complicated to get it solved.

1 user says Thank You to Ninja Lead for this useful post

1. jlrx

[jlrx Friend jlrxJoin date: September 2012Posts: 8Downloads:0Uploads:3 Thanks: 8 Thanked: 1 times in 1 posts]

#527179

Thanks anayways, 🙂
I have been playing with the CSS (I’m no expert) and I have been able to lower the icon-close.gif and the scrollbar.gif; It’s not as pleasing, but it’s a shortcut until I get to learn more about this template.

[Author]

Posts