Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Menu Styling+ Images

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Have a couple of queries relating to the menu toolbar

1. The changing of the width/depth when scroll down commences. I'd like it to be stationary Something to do with logowrap but I'm lost

2. The menu background colour when viewing in mobile I want to change. Lost here as well

Full width image don't resize nicely on pages other than index.
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
Last Edit: 2 years 5 months ago by Andrew.
The administrator has disabled public write access.
Hi Andrew,

Do you have a link for the site?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Local at present Paul.
Will shift and get back
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.
Site .... www.millercontractors.com.au/new/
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.
2. Looks like you may need a background colour for the toolbar wrap?

There is also one link dropping to a new line
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Andrew
For 1.

Can you try adding

@media screen and (min-width: 787px) {
.zen-nav-fixed .zen-spotlight {padding: 15px 3%;}
}

The sticky doesn't have the padding that is currently added to the normal logo wrap row

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Andrew
For the images try adding

img {height: auto;}

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Andrew
Thanks Paul.
Just been testing on my mobiles ... font css is going to Times
Test on QuirkTools and it's all ok
What's degrading and where can I fix this? Not happened before
Thanks
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.
Can I just double check what font are you actually using?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Actually a screenshot might be easier so that I can see how you are adding it?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
OK am using the Google Allerta font
How to add an alternate is what I'm unsure of.
In Templates>Design>Body Fonts>Google Font.

Having been digging around and thinking I don't go down that path if I can't activate an alternate font.

Hope that drivel makes sense? :blink:
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.
What are you wanting to add the font to? what tag?

and can you add a screenshot of how you are adding it

It looks like you are trying to add to the heading tag?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Also Allerta 2 isn't a google font looking in the google font directory as that seems to be added as a menu font

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Here you go ... Body Font
googleFont.png
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.
Allerta 2 won't work as I can't see this listed on the google fonts - generates no results when searching
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
fonts.google.com/?query=Allerta

Is what I see

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
See where it comes from I have no idea as it's never been there, I never put fonts in the custom.css
No reference to that font here view-source:http://www.millercontractors.com.au/new/templates/buildr/css/custom.css

No cache enabled either :sick:
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.
You have this in the source code

h1, h2, h3, h4, h5, h6, blockquote {
font-family: 'Allerta';
}

Can you attach the screenshot of the headings - this is different than the screenshot

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
For the menu google font you have

#menu li a, #menu li span, #onepage li a {
font-family: 'Allerta 2';
}

This isn't a valid font so it will default
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Ok to chase down the issue I've changed Allerta to Helvetica in the Template setting for ALL fonts

Checking the source I get this ...
<link rel="stylesheet" href="/new/templates/buildr/css/custom.css" type="text/css" /><style type="text/css">
			html > body {
				font-family: sans-serif;
			}
				h1, h2, h3, h4, h5, h6, blockquote {
				font-family: sans-serif;
			}
		
					#menu li a, #menu li span,#onepage li a  {
					font-family: sans-serif;
			}
			
					#logo h1,#logo h2,#logo h3,#logo h4,#mobile-logo h1,#mobile-logo h2,#mobile-logo h3,#mobile-logo h4 {
					font-family: 'Amatic SC';
				}
		
			.utafiti-lasted-news h3, .utafiti-lasted-news h3 a {font-family:Exo;color:#61788c; font-weight: normal;}
		
	</style>
There are no fonts referenced in the custom.css
What is generating this <link href="//fonts.googleapis.com/css?family=Amatic+SC%7CExo" rel="stylesheet" type="text/css" /> to call Amatic SC and Exo ?
Have been through all settings and no Google fonts called
At a total loss
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers