Joomla Templates Club 406,261 posts

[Jacek Tomala Friend Jacek TomalaJoin date: April 2015Posts: 15Downloads:151Uploads:3 Thanks: 13]

#194655

What to change to have logo beneath megamenu level 1 (z-index?) in JaKranos?
Now left side of submenu – first row in megamenu is covered by logo.

Kind regards

---

Attachments:

1. 

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

#522157

It’s possible as the logo layer goes with z-index: 12 meanwhile the menu layer with z-index: 11. We can select one of 2 options below:

+ The logo aligns with menu, you need to customize the logo css on this case. OR,

+ Change all sub-menus to show on the right side of logo (need to customize menu)

Let me which approach you prefer, then I will try to guide in more details.

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

1. Jacek Tomala

[Jacek Tomala Friend Jacek TomalaJoin date: April 2015Posts: 15Downloads:151Uploads:3 Thanks: 13]

#522274

<em>@Ninja Lead 410645 wrote:</em><blockquote>It’s possible as the logo layer goes with z-index: 12 meanwhile the menu layer with z-index: 11. We can select one of 2 options below:

+ The logo aligns with menu, you need to customize the logo css on this case. OR,

+ Change all sub-menus to show on the right side of logo (need to customize menu)

Let me which approach you prefer, then I will try to guide in more details.</blockquote>

Thank you for your answer. I hope that first option will be better sollution, we’ll see, Please guide me more datails.

Kind regards
Jacek Tomala
jacekt

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#522283

post me your site ftp details in PM, I will try to reorganize and get the solution as the screenshot

1 user says Thank You to chavan for this useful post

1. Jacek Tomala

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

#522303

<em>@jacekt 410799 wrote:</em><blockquote>Thank you for your answer. I hope that first option will be better sollution, we’ll see, Please guide me more datails.

Kind regards
Jacek Tomala
jacekt</blockquote>

The css file needs to touch on this case is templates/ja_kranos/css/template.css file, then change width and height as text in red below

h1.logo { width: 180px; height: 102px; position: absolute; top: 0; left: 30px; z-index: 2; }

h1.logo a {
background: url(../images/business-logo.png) no-repeat;
display: block;
width: 180px;
height: 102px;
z-index: 2;
}

and make the logo smaller : templates/ja_kranos/themes/pink_light/images/logo.png file

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

1. Jacek Tomala

[Jacek Tomala Friend Jacek TomalaJoin date: April 2015Posts: 15Downloads:151Uploads:3 Thanks: 13]

#522420

Thank you very much for your advice. It works for me , but not for my client. She prefers to have old, bigger logo.

Would you please explain me the second option:

” Change all sub-menus to show on the right side of logo (need to customize menu)”

Kindest regards
Jacek Tomala

[Jacek Tomala Friend Jacek TomalaJoin date: April 2015Posts: 15Downloads:151Uploads:3 Thanks: 13]

#522421

Howdy Chavan,

Thank you very much. I really appreciate your readiness to help me.

i already started with changes that Ninja Lead send me and like to know and try his second solution.

Sincerely yours
Jacek Tomala
jacekt

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#522764

I have made it done, with some customization in the Template

1. I have moved some codes from templates/ja_kranos/blocks/header.php to templates/ja_kranos/blocks/mainnav.php

2. some css changes as follows

Replaced this code

#ja-mainnav .main { background: #1a1a1a}

With

#ja-mainnav .main { background: #1a1a1a border: 10px solid #FFFFFF }

Replaced this code

h1.logo { width: 146px; height: 82px; position: absolute; top: 0; left: 30px; z-index: 2; }

With

h1.logo { width: 146px; height: 82px; position: absolute; top: -10px; left: 30px; z-index: 2; }

Replaced this code

#ja-header { z-index: 12; }

With

#ja-header { z-index: 12; display:none; }

One Restriction : you will not be able to make use of “top-social” position, since we have hidden the complete header.

1 user says Thank You to chavan for this useful post

1. Jacek Tomala

[Jacek Tomala Friend Jacek TomalaJoin date: April 2015Posts: 15Downloads:151Uploads:3 Thanks: 13]

#524367

Dear Sirs,

Greates thankyou for your help, I am very greatefull.

jacekt

[Author]

Posts