-
AuthorPosts
-
July 3, 2013 at 11:36 am #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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
July 3, 2013 at 3:57 pm #497841Try 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?
July 3, 2013 at 4:21 pm #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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
July 3, 2013 at 4:24 pm #497853Did you TRY the above suggestion – also using the “position: absolute” property ???
July 3, 2013 at 4:30 pm #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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
July 3, 2013 at 4:32 pm #497857Perhaps try “position: relative” instead?
July 3, 2013 at 4:33 pm #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 Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
July 4, 2013 at 4:17 am #497912Hi 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.
July 4, 2013 at 7:03 am #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 Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
July 5, 2013 at 8:26 am #498057Hi 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.
-
1 user says Thank You to phong nam for this useful post
AuthorPostsViewing 10 posts - 1 through 10 (of 10 total)This topic contains 10 replies, has 3 voices, and was last updated by phong nam 11 years, 4 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
Cannot change Logo position
Viewing 10 posts - 1 through 10 (of 10 total)