Before you ask please READ THIS

silenzia.com 3- vertical logo?

edited February 2014 in Hypershot Posts: 13
Hi,

The logo; My logo crashes with the images and so i wonder if I can i have it vertical on the left side?
...and not have the menu on the right side lowered with it?

And when i put a vertical logo image, it messes up the reponsive layout...
Would there be an easy way to make one logo for normal layouts and one for below i pad size?

I hope so, because then this site will ROCK! :)
thanks,
Levent
Post edited by Air on

Comments

  • AirAir
    Posts: 10,814
    Hello again
    JackBodiless said: and not have the menu on the right side lowered with it?
    Try such thing. Go to js/script.js line ~407 and change this
    logoSizeMenu = function(){
                            menu_h = logo.parent().innerHeight();
                            a.find('div.menu-container').children().css('height', menu_h)
                                //ul > li > a
                                .children().children()
                                .css('line-height', menu_h+'px');
                        },
    to
    logoSizeMenu = function(){},
    should stop resizing menu to logo size.
    JackBodiless said: And when i put a vertical logo image, it messes up the reponsive layout...
    Would there be an easy way to make one logo for normal layouts and one for below i pad size?
    There is no such option. However with CSS there are various tricks you could do:
    1. after certain breakpoints hide <img> in logo and instead use background-image on <a id="logo">.
    2.resize it with CSS after certain breakpoints, eventually with use of !important. Do you need help with proper CSS?

    With regards.
  • Hey Air... Thanks for this man... the first bit works... hmmm except when i go on the slide view for albums... Resizes or pushes the featured images for the albums down, like the menu... so i guess... ill have to put a similar line somewhere in the script.js ?...
    please see the attached image.

    and the second... wow, boy, it is also WAY over my head :)
    I would apreciate it a lot if you could help... Would be wonderful if i could have a normal sized vertical logo in the responsive versions... Or maybe even just an S logo on the top right corner... so a second image then. Whichever is easier for you...
    If its not easy or you dont have time i can wait using a normal sized horizontal logo...
    let me know ok? Thanks a lot :)
    Levent.



    Screen Shot 2014-02-25 at 01.30.12.png
    2880 x 1800 - 2M
  • AirAir
    Posts: 10,814
    JackBodiless said: he first bit works... hmmm except when i go on the slide view for albums... Resizes or pushes the featured images for the albums down
    It still logo that makes your header too big which makes small places for rest of site.
    Use this CSS to make other image for logo on small screens

    @media only screen and (max-width: 650px) {
    #logo img{
    display: none;
    }
    #logo{
    background-image: url("http://xxx.com/newlogo.png");
    height: 50px;
    width: 100px;
    }
    }
    With regards.
  • Hey man, thanks... it has changed on mobile yes, but now its repeating...
    Weird no?
    Screen Shot 2014-02-26 at 02.01.12.png
    1330 x 1722 - 2M
    Screen Shot 2014-02-26 at 02.01.43.png
    968 x 1554 - 1M
  • AirAir
    Posts: 10,814
    I thought you know CSS to make final adjustments :-) Use this code instead

    @media only screen and (max-width: 650px) {
    #logo img{
    display: none;
    }
    #logo{
    background-image: url("http://xxx.com/newlogo.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 50px;
    width: 100px;
    }
    }
    With regards.
  • I know a little but this trick i hadnt seen before... Im going to try to understand and learn what youve done :) thanks...
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!