Public Forums 71,145 posts

[tzic Friend tzicJoin date: January 2012Posts: 31Downloads:0Uploads:0 Thanks: 8]

#188665

Hello, I cannot change the position of the logo on my header. Check this link I want the logo to stay just above the first menu item of mega menu. If I alter css with padding-left or magrin-left I can take it where I want but it changes position if I resize my browser. I had fixed that in the past but recently I updated and cannot make it work

Any help would be gratefully appreciated

I followed this guide to make the round corners

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

#497841

Try This . . .

File path –> /templates/ja_purity_ii/css/template.css

at line 432, add “position: absolute” as ell as a “margin-left” property – as follows:


h1.logo a {
background: url("../images/logo-trans.png") no-repeat scroll left center transparent;
display: block;
height: 79px;
margin-left: 20px;
position: absolute;
width: 207px;
}

Is that what you were looking for?

[tzic Friend tzicJoin date: January 2012Posts: 31Downloads:0Uploads:0 Thanks: 8]

#497851

<em>@TomC 379225 wrote:</em><blockquote>Try This . . .

File path –> /templates/ja_purity_ii/css/template.css

at line 432, add “position: absolute” as ell as a “margin-left” property – as follows:


h1.logo a {
background: url("../images/logo-trans.png") no-repeat scroll left center transparent;
display: block;
height: 79px;
margin-left: 20px;
position: absolute;
width: 207px;
}

Is that what you were looking for?</blockquote>

Thank you for the reply but this is not what I wanted because as you re-size the browser, the logo moves from the desired position and stays always (the value of margin-left) pixels from the left border…. The logo has to stay above the first menu item all the time. It was working like this for a year…

Maybe I should change something in layouts?

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

#497853

Did you TRY the above suggestion – also using the “position: absolute” property ???

[tzic Friend tzicJoin date: January 2012Posts: 31Downloads:0Uploads:0 Thanks: 8]

#497856

<em>@TomC 379237 wrote:</em><blockquote>Did you TRY the above suggestion – also using the “position: absolute” property ???</blockquote>

of course I did… Did you check it with firebug and worked for you? It only works if you make the browser smaller. If you make it bigger the logo sticks to the left and expands with browser border.

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

#497857

Perhaps try “position: relative” instead?

[tzic Friend tzicJoin date: January 2012Posts: 31Downloads:0Uploads:0 Thanks: 8]

#497859

<em>@TomC 379241 wrote:</em><blockquote>Perhaps try “position: relative” instead?</blockquote>

still no luck with relative… I ll break my head I cant remember how I did it the last time…

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#497912

Hi tzic,

You can use @media queries with margin-left value for each device screen. Put these @media responsive codes into /templates/ja_purity_ii/css/template.css file.

i.e: for iPad landscape screen, it should be:

@media (min-width : 768px) and (max-width : 1024px) {
h1.logo, div.logo-text {
float: left;
z-index: 1;
position: relative;
left: 12px;
}
}

This make the logo still stay above first menu item on iPad landscape view. You can check out other @media queries at: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

* Clear JAT3 cache after saving changes.

[tzic Friend tzicJoin date: January 2012Posts: 31Downloads:0Uploads:0 Thanks: 8]

#497927

<em>@Leo Burnetts 379310 wrote:</em><blockquote>Hi tzic,

You can use @media queries with margin-left value for each device screen. Put these @media responsive codes into /templates/ja_purity_ii/css/template.css file.

i.e: for iPad landscape screen, it should be:

@media (min-width : 768px) and (max-width : 1024px) {
h1.logo, div.logo-text {
float: left;
z-index: 1;
position: relative;
left: 12px;
}
}

This make the logo still stay above first menu item on iPad landscape view. You can check out other @media queries at: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

* Clear JAT3 cache after saving changes.</blockquote>

I could not make it work. The problem lies somewhere in the layout files of ja_purity. Look at this. I use a specific layout called right-main-left. If I use it like this:

<?xml version="1.0" encoding="utf-8"?>
<layout name="desktop">
<!--Extra css load for this layout-->
<stylesheets>
</stylesheets>
<blocks name="top" style="xhtml">
<block name="absolute" type="modules" style="raw">absolute</block>
<block name="top-panel" type="modules" style="raw" main-inner="1">top-panel</block>
<block name="header" type="header" no-main="1"></block>
<block name="mainnav" type="mainnav" main-inner="1"></block>

logo and curved corner stay far left and banner and the other curved corner stay right. If I change

<block name="header" type="header" no-main="1"></block>

to

<block name="header" type="header" main-inner="1"></block>

then logo comes exactly where I want it but the curved corners and the red banner do the same thing. Is there a way to seperate this behavior so that the logo will stay above the first menu item and all other (curned corners and red banner which is an altered search module) stay at the corners?

PS I will leave it like this

<block name="header" type="header" main-inner="1"></block>

so you can take a look

Thank you for the help so far

PS2 I added 2 divs in header.php for the corners to display correctly following this tutorial http://wiki.joomlart.com/wiki/JA_Template_Framework/FAQs


<div id="corner-top-left"> </div>
<div id="corner-top-right"> </div>
<?php

/**
* ------------------------------------------------------------------------
* JA T3v2 System Plugin for J25 & J31
* ------------------------------------------------------------------------
* Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
* @license - GNU/GPL, http://www.gnu.org/licenses/gpl.html
* Author: J.O.O.M Solutions Co., Ltd
* Websites: http://www.joomlart.com - http://www.joomlancers.com
* ------------------------------------------------------------------------
*/

// No direct access
defined('_JEXEC') or die;
?>
<?php
$app = JFactory::getApplication();
$siteName = $app->getCfg('sitename');
if ($this->getParam('logoType', 'image')=='image'): ?>
<h1 class="logo">
<a href="<?php JURI::base(true) ?>" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($this->getParam('logoText'))=='') ? $siteName : JText::_(trim($this->getParam('logoText')));
$sloganText = JText::_(trim($this->getParam('sloganText'))); ?>
<div class="logo-text">
<h1><a href="<?php JURI::base(true) ?>" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
</div>
<?php endif; ?>

<?php if($this->countModules('search')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="search" />
</div>
<?php endif; ?>

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#498057

Hi tzic,

I will help you to make curned corner look better, but it will take much support time of me to make red banners (a Custom HTML module in head-search position) to get correct when you resize the browser. Because, I will need to use reponsive @media queries to reach your requirement. Pls try to ask others for better solution.

Curned corner:

1. Remove your extra codes in header.php file.

<div id="corner-top-left"> </div>
<div id="corner-top-right"> </div>

2. Open templates/ja_purity_ii/css/template.css, then replace lines:

#ja-header {
background: #94c9d9;
position: relative;
z-index: 10;
}

with

#ja-header {
background: #94c9d9;
position: relative;
z-index: 10;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

>> This will make the curned corner like below attached image.

* Remember to backup your files before applying changes.

---

Attachments:

1. 

1 user says Thank You to phong nam for this useful post

1. tzic

[Author]

Posts