I have strange bug where while browsing through categories on the magento webshop header of the webshop changes height on different pages (http://shop.tvornica-snova.hr/index.php/)
Ie if you are on the homepage, and click on some of the categories the header extends for additinal 10px in height and kind of pushes the content down.
I seem to have same html structure and layout for the both homepage and categories so I cannot figure out where is the bug.
Can someone help?
Check out the header-top section of your markup for a normal page, and for the "jumping" page.
Normal:
<div class="logo">
<strong>Magento Commerce</strong>
<a href="http://shop.tvornica-snova.hr/index.php/" title="Magento Commerce" class="logo">
<img src="http://shop.tvornica-snova.hr/skin/frontend/default/f002_yellow/images/logotvornica.png" alt="Magento Commerce">
</a>
</div>
Jumping:
<a href="http://shop.tvornica-snova.hr/index.php/" title="Magento Commerce" class="logo">
<strong>Magento Commerce</strong>
<img src="http://shop.tvornica-snova.hr/skin/frontend/default/f002_yellow/images/logotvornica.png" alt="Magento Commerce">
</a>
The first one contains two references to class="logo", which has a defined rule of margin-top: -10px;. This is the case for any of your pages where the header is the closest to the top of the page - it is being pulled up by 20px
The second one is marked up slightly differently, and contains just one reference to the class - hence the 10px shift you see.
Related
I'm building a site on Wordpress and using html5blank theme for the first time. I have a number of sub-pages I need to add as links from one of the main pages.
On of my main pages is titled 'Agency' and within the agency page I have a number of images which act as links to a number (7) of sub-pages -
I've created the sub-pages on my dashboard with Agency as the parent so the link I get for the first image is ...site-name/agency/2k4kproduction . Here's the code for the links. So far I've only converted two of the links (2k4k and adhoc) -
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="http://localhost:8888/agency/2k4k-production/"><figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure></a>
<a href="postproduction.html"><figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure></a>
<a href="2d3danimation.html"><figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure></a>
<a href="http://localhost:8888/agency/adhoc/"><figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure></a>
<a href="interactive.html"><figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure></a>
<a href="tvadverts.html"><figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure></a>
<a href="360video.html"><figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure></a>
</div>
For my text files I've titled them page-agency-2k4kproduction.php and page-agency-adhoc.php which is what I believed to be the correct naming convention as per the template hierarchy. However, when I click on these links they revert to my home page. I've no idea why this is not working as my agency file/page works fine as page-agency.php so I'm not sure why this will not work. Any assistance appreciated.
Thank you for taking a look at my question, I have developed a WordPress theme and added live customization to the logo using PHP (Although I think this is a HTML/CSS problem)
Here is what the logo looks like:
On top of the gavel there are some words which is creating that white banneer.
Here's the HTML That handles the logo:
<header class="main_menu">
<div class="container nav_wrapper">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">
<?php
// Display the Custom Logo
the_custom_logo();
if(!has_custom_logo()){
echo '<img alt="" src="http://placehold.it/350x90" class="img-responsive">';
}
?>
</a>
The the_custom_logo(); function prints out the image tag.
Any ideas on how I can go about fixing this? I would REALLY appreciate it.
Your question states that on top of the gavel it has words but you don't specify what the words are.
It is worth checking all your code especially in your functions the_custom_logo and hascustomlogo (not printed) for any odd echo or print statements or check your HTML for odd characters. Sometimes echos can be used for locating or printing errors but they maybe triggered erroneously which could be causing the problem with your code.
It might help to view the source in your browser as that will tell you at which point the text is appearing in your code to help you narrow down your search.
Hope this helps
So I've been trying desperately to get my page title to overlay in the center of the header image, both horizontally and vertically, on my portfolio pages (here's a page with a longer title). I finally found a way to get the h1 title where I want it, but now I want to make it larger. However, when I currently resize the window to certain widths, the title doesn't wrap, it just disappears when it gets to long for the window. Would you mind taking a look and see if there would be a fix for this? I'm thinking that I'm using the wrong display tag somewhere along the line, but I'm not the best coder.
Here is the php for the header image and title (you can ignore the title that is black as I will get rid of that once I figure this one out). I think you should be able to see the rest of the html and css, but if I can provide anything else that may help with figuring this out, please let me know what that might be.
<?php get_header(); ?>
<div id="middle" class="clearfix">
<?php // Get the header image
$hi = getHeaderImage();
if($hi) :
?>
<div id="pageHeadImage" class="" >
<div class="inside" style="<?php echo 'background-image: url('.$hi.');' ?>">
<div id="projectTitleDiv">
<span class="aligner"></span>
<h1 class="projectTitle"><?php the_title(); ?></h1>
</div>
</div>
</div>
<?php endif;?>
Your div.aligner is causing the issue - it pushes the h1 out of the div. Remove div.aligner and use the following CSS to vertically centre #projectTitleDiv:
#projectTitleDiv {
position:relative;
top:50%;
transform:translateY(-50%);
}
I have a quite specific problem to solve today - I just can't get my head wrapped around it. Makes totally no sense for me...
It's about a live site: http://rawrockchick.com/#testimonial-slider
If you scroll down to the testimonials on the home page (the link above should bring you there) you'll see that the slider arrows are missing. For a reason I can't figure out the URL is prepended a couple of times before the image src:
<img src="http://rawrockchick.comhttp://rawrockchick.comhttp://rawrockchick.com/media/manual/slider-arrow-left.png">
This wasn't the case two weeks ago, without anybody consciously touching it. I first thought of some Javascript thing happening with the bootstrap slider, but as you can see the testimonial image itself is not affected, even though it's placed in the exact way as the sliders are.
The whole slider is a very simple bootstrap carousel. Excerpts (relevant section) of the code:
<div class="item active">
<div class="row">
<div class="col-sm-8">
<p>"An up-and-coming UK raw food teacher and songstress, Barbara Fernandez has it going on! This girl can do food prep! Her Raw Mexican food is amazing"</p>
<p class="testimonial-author">Nomi Shannon</p>
<p class="testimonial-role">rawgourmet.com</p>
<a class="left carousel-control" href="#testimonial-slider" data-slide="prev"><img src="/media/manual/slider-arrow-left.png"></a>
<a class="right carousel-control" href="#testimonial-slider" data-slide="next"><img src="/media/manual/slider-arrow-right.png"></a>
</div>
<div class="col-sm-4">
<img src="/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
</div>
</div>
</div>
As you can see the images are inserted the exact same way.
What I tried already (no change):
I moved the <img src="/media/manual/slider-arrow-left.png"> out of the link and placed it directly under the working image, the same strange behavior occurs for the slider arrow (by this test I wanted to make sure there's no jquery rule affecting only that one column of the slider, or the a tag).
Hardcoding absolute image URL (src="http://rawrockchick.com/media/manual/slider-arrow-left.png")
WordPress PHP query for image URL (src="<?php echo home_url(); ?>/media/manual/slider-arrow-left.png")
I'd be very thankful if anyone had any ideas about that phenomena. Or idea how to debug it further.
I am not really sure why you are getting a double URL but using an absolute path to your image could help solve things.
<img src="<?php echo home_url(); ?>/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
Solved.
Found it out via disabling plugin for plugin that a Pinterest hover button plugin (this to be precise) was causing that mysterious phenomena.
Thanks for all the answers and hints!
I am working with Drupal 7 in a Zen 7.x-5.4 subtheme. I am attempting to add a primary navigation bar inside the header/banner area, to the right of the logo along the bottom.
I am not using the 'navigation' region provided as that sits below the header. Instead, I have added a menu block and placed it in the 'header' reagion. Unfortunately, it appears well below the header and logo.
Here is the pertinent html that is output:
<header id="header" class="header" role="banner">
<a id="logo" class="header__logo" rel="home" title="Home" href="/sandbox/">
<nav id="secondary-menu" class="header__secondary-menu" role="navigation">{this menu works fine}
<div class="header__region region region-header">
<div id="block-menu-menu-primary-nav" class="block block-menu first last odd" role="navigation">
<h2 class="block__title block-title">Primary Nav</h2>
<ul class="menu">{menu list here}</ul>
</div>
</div>
</header>
The menu that isn't where I want it lies in the region-header class. Any time I add a block to 'header' in the zen interface, it ends up in that class and appears below the header, not in it. The secondary menu, which is in the header by default, is fine and exactly where it should be. There is no css currently defined for region-header. header is 120px in height and has plenty of room for what I want to do. page.tpl.php offers little more than "print render($page['header']);" so I don't appear to have any control there.
I have 2 questions:
How can I get this menu up into the header where I want it?
How can I get it to hide the 'Primary Nav' title on the menu block? The title is required when creating a menu block and there does not appear to be a method for making it invisible.
Please let me know if there is any more specific information needed to answer these questions.
And, yes, I know similar questions have been asked, but they seem to apply to other versions of Zen and none I've found have been at all helpful.
It never fails. 3 days I've been trying to figure this out before posting a question and as soon as I post, I figure it out.
There was a css block in misc.css with the following
/* Wrapper for any blocks placed in the header region. */
.header__region {
/* Clear the logo. */
clear: both;
}
I just had to comment out the 'clear: both;' line as that was not allowing anything else to float next to the logo.
I was able to remove the menu title by going to 'configure block' and adding "" in the title there to override the title required when creating the menu.
Hopefully this will be of use to someone.