Joomla Templates Club 406,261 posts

[banepa Friend banepaJoin date: September 2011Posts: 109Downloads:0Uploads:2 Thanks: 23 Thanked: 2 times in 1 posts]

#197834

Currently the Logo and the navigation bars are in two different rows.
ja-header
ja-mainnav

I need to change the layout.
I need Logo on the left and the navigation bar on the right on the same line.

What is the easiest way to achieve this?
Which file(s) should I modify to achieve this?

If you look at JA Decor or JA Biz you will see the logo on the left and the navigation menu on the right on the “same line”.

Any suggestions?

Thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535467

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off/No” within your Template Manager–General settings

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

#535530

@banepa: Please try with workaround below.

Open the templates/ja_zite/css/template.css file

Change

h1.logo {
float: none;
height: 80px;
margin: 0 auto;
width: 92px;
}

To

h1.logo {
float: left;
height: 80px;
margin: 0 auto;
width: 92px;
position: absolute;
top: 0px;
}


Once done, clear cache from admin area.

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

1. banepa

[banepa Friend banepaJoin date: September 2011Posts: 109Downloads:0Uploads:2 Thanks: 23 Thanked: 2 times in 1 posts]

#535561

Thanks @ninja Lead…your solution pulled the Logo and navigation in the same level.

Only one issue….
The image gets buried behind the nav (NAVIGATION) when viewing in smaller window of mobile device.

Any suggestion will be appreciated.

Thanks in advance.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535586

As I had mentioned previously, it would be very helpful to be able to view your particular issue online . . .
hence the need for the url of the site you’re working on.

[banepa Friend banepaJoin date: September 2011Posts: 109Downloads:0Uploads:2 Thanks: 23 Thanked: 2 times in 1 posts]

#535605

Tom, I sent you my URL in PM.

Thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535719

Okay, so if I am understanding you correctly, you want your logo and main nav menu to be on the same line/plane – similar to the two templates you originally linked as examples. If this is still the case, then perhaps you can try the following:

Within file path —> /templates/ja_zite/css/template.css
at line 738, modify the following CSS rule as follows:


#ja-mainnav #ja-megamenu {
float: right;
position: relative;
right: 10%;
}

Then, at line 699, modify as follows:


h1.logo {
float: left;
height: 10px;
margin: 0 auto;
width: 300px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better?

1 user says Thank You to TomC for this useful post

1. banepa

[banepa Friend banepaJoin date: September 2011Posts: 109Downloads:0Uploads:2 Thanks: 23 Thanked: 2 times in 1 posts]

#535750

Thanks Tom.

Your solution moves the navigation to the right as I wanted.
Ninja Lead’s solution moves the logo to the same horizontal level as the navigation bar as I wanted.
Thanks to both of you.

However, one problem still remains.
In a regular computer browser it’s fine.
In a mobile phone the logo goes behind the “NAVIGATION” block.

Is there a fix for this in the mobile version?
Is there a CSS fix just for mobile perhaps?

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

#535785

Regarding the logo behind the “NAVIGATION” block, please open the templates/ja_zite/css/layout-mobile.css file and add new rule below:


h1.logo {
top: -30px;
left: 10%;
}


[Author]

Posts