Joomlabamboo Support Forum :: Topic: Menu Styling+ Images (1/2) | Joomlabamboo

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

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

6 years 9 months ago

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
12 Month basic
509 posts
20 Thanks
Karma: 10

Last Edit: 6 years 9 months ago by Andrew.

The administrator has disabled public write access.

6 years 9 months ago

Hi Andrew,

Do you have a link for the site?

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

Local at present Paul.
Will shift and get back

Andrew
12 Month basic
509 posts
20 Thanks
Karma: 10

The administrator has disabled public write access.

6 years 9 months ago

Site .... www.millercontractors.com.au/new/

Andrew
12 Month basic
509 posts
20 Thanks
Karma: 10

The administrator has disabled public write access.

6 years 9 months ago

2. Looks like you may need a background colour for the toolbar wrap?

There is also one link dropping to a new line

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

The following user(s) said Thank You: Andrew

6 years 9 months ago

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
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

The following user(s) said Thank You: Andrew

6 years 9 months ago

For the images try adding

img {height: auto;}

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

The following user(s) said Thank You: Andrew

6 years 9 months ago

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
12 Month basic
509 posts
20 Thanks
Karma: 10

The administrator has disabled public write access.

6 years 9 months ago

Can I just double check what font are you actually using?

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

Actually a screenshot might be easier so that I can see how you are adding it?

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

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?

Andrew
12 Month basic
509 posts
20 Thanks
Karma: 10

The administrator has disabled public write access.

6 years 9 months ago

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
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

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
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

Here you go ... Body Font

Andrew
12 Month basic
509 posts
20 Thanks
Karma: 10

The administrator has disabled public write access.

6 years 9 months ago

Allerta 2 won't work as I can't see this listed on the google fonts - generates no results when searching

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

fonts.google.com/?query=Allerta

Is what I see

Cheers

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

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

Andrew
12 Month basic
509 posts
20 Thanks
Karma: 10

The administrator has disabled public write access.

6 years 9 months ago

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
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

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
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

6 years 9 months ago

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
12 Month basic
509 posts
20 Thanks
Karma: 10

The administrator has disabled public write access.

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

Happy Campers