Changing menu height Split menu

Hi, 

thanks a lot for your great template! Awesome work! I have a small question. I'm using the split menu as header. I need to display a larger logo in the center (height 110px). What do I need to change in the css to accomplish this while remaining the correct placement of the navigation labels (I tried changing the height of:  .header-split #Header .top_bar_left, .header-split #Header .top_bar_right { height: 140px;} but then the scrolling of the page and placement of navigation labels is out of sync (http://goodsafari.windkracht20.nl). Hope you can help me out.

image

Thanks a lot!
BR 
Bjorn 
windkracht20

Comments

  • Hi,

    we recommend to install theme on fresh wordpress/database because your website currently completely does not work.
  • Hi,

    thanks for the quick reply. The DNS is not working yet...sorry. Uploaded the site to another directory. You can find the site here: http://www.windkracht20.nl/goodsafari_new

    I also noticed that the full screen background images are not properly displayed on the ipad either...any idea as well? Thanks in advance!

    BR
    Bjorn

  • As we see, logo have original size in header. So if you want to use larger logo size, then you should upload larger image. About background images they won't look the same on mobile devices as on desktop because they are css background, not image and that's why can't be responsive.
  • Hi, I think I mean something different. My logo is larger than default logo (higher). It was cut off at the bottom and therefore I added custom css  .header-split #Header .top_bar_left, .header-split #Header .top_bar_right { height: 140px;}

    But now the scrolling of the pages is out of sync as you can see.
  • And about the background image on iPad. The image is zoomed in very much on iPad. What seems to do the trick is to disable the property 'background-attachment: fixed;' for div.section.full-screen.  



  • edited February 2015
    Sticky header behavior is ok. This is how sticky menu works. So you want to keep the same size of sticky menu as regular before you start scrolling? About background image we thought that you mean something else. But properties you mean can be setup for each section. There is option named "Background Image Position".
  • Hi, thanks again for replying! I'm sorry not to be clear enough. I'm not saying that the sticky menu isn't working well, because it is. It's not a 'bug' in your template...it's just a question if you could let me know which CSS properties I need to change to maken the split menu header higher so it can contain a higher logo while still maintaining the correct scrolling behavior (so it starts and ends at the correct position). 

    image

    image




    About the background. I know that I can set the Background Image Position. The thing is, that when I select 'Center No-Repeat Fixed Cover' or 'Parallax' the image is displayed well on PC but not on iPad (on the iPad the image is zoomed in way to big instead of only covering the screen).

    image

    image
    I hope I'm clearer now and thanks for your patience!
    BR
    Bjorn

  • 1. So basically you want to increase sticky header to be similar as regular menu, right?

    2. About background, this is unfortunately how those options works. iDevices does not work well with those options and this can't be changed. That's why we made "Responsive visibility" option for sections and when you don't like something in mobile devices, then you can just hide it and create something else instead.
  • Hi, once again thanks for the quick reply ;-)

    1) no, what i the sticky header may remain the same as it is now. I only want the sections to scroll to the right position when using the navigation buttons (Since i changed the height of the non-sticky header).

    2) OK, clear.
  • 1) Ok. We got it now. We did not noticed this behavior before. But we need access to your FTP so we can have a look on it because for that part of theme is responsible javascript. So please send us necessary details on pm.
Sign In or Register to comment.