JoomlArt Forums 32,862 posts

[macmoneyjobs Friend macmoneyjobsJoin date: April 2010Posts: 2Downloads:1Uploads:2 Thanks: 3]

#203814

Please help me with adjusting the header menu so that it aligns with my logo just like the demo for JA Elastica. As you can see in attached picture my logo has completely distorted the headers neat appearance.

Secondly, if you look at the site using a handheld device the logo extends to the grey area and the tagline is not visible.

Thank you!

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#559555

HI
this issue is due the custom height value changed by you in template.css file .

Here >>> http://prntscr.com/65osw8
Go to template.css file
find this code
h1.logo {
background: #DEE006
float: left;
font-size: 1em;
height: 105px;
width: auto;
z-index: 12;
}

Change it into

h1.logo {
background: #DEE006
float: left;
font-size: 1em;
height: 86px;
width: auto;
z-index: 12;
}

+
Go to template/your JA Template/css/menu/mega.css
Find this code

.ja-megamenu ul.level0 li.mega {
height: 70px;
}

Change it into

.ja-megamenu ul.level0 li.mega {
height: 86px;
}

Save clear cache and check. It will look like this >>> http://prntscr.com/65oubj

Take a backup of your Site before Applying changes .

1 user says Thank You to Pankaj Sharma for this useful post

1. macmoneyjobs

[macmoneyjobs Friend macmoneyjobsJoin date: April 2010Posts: 2Downloads:1Uploads:2 Thanks: 3]

#559650

Thank you sir! Please see attached screen shot of tablet view. The logo overlaps on the grey area and the tag line is not visible. How can I adjust it to display the full logo?

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#559683

Hi Go to css/layout-mobile css
Find this code

h1.logo a { height: 40px !important; margin-top: 10px; padding: 0 !important;}
change it into

h1.logo a { height: 56px !important; margin-top: 10px; padding: 0 !important;}
It will solve the problem >>> http://prntscr.com/66498i

1 user says Thank You to Pankaj Sharma for this useful post

1. macmoneyjobs

[Author]

Posts