Hi, I followed these instuctions to make my mobile icon larger:  http://themenectar.ticksy.com/ticket/46745/search/

(Thanks)

However, now my mobile icon is not aligned properly with the mobile menu icon (the menu icon is too high, and not alligned vertically in the middle - see screenshot).  

How do I fix this?

...also, since it is all related, I would also like my website header to not jump to two lines as I am manually resizing it.  In other words, is there a way to either display the full header, or just the mobile version if it gets too small?  (see attachment) 

I tacked this question on since I wasn't sure if this could all be solved by adding one big snippet of code in the Salient General Settings Custom CSS box.  Basically, I'd like my website header to:

1. Display a larger logo image in mobile

2. Vertically align the menu icon with the enlarged logo in mobile

3. Not break the logo and menu items into two seperate header lines when working with a screen resolution that is somewhere in between the size of a full desktop and mobile.

Thanks for your help!

Hi,

Thank you so much for your quick response!

I inserted the code you provided, but unfortunately that didn't quite work.  It did fix my #1 and #3 issues (that is, it kept the logo large on a mobile device, and it prevented the header from breaking up into 2 lines - great!) but, unfortunately, it didn't align the logo and menu icon vertically.   In fact, it caused the logo to be positioned partially below the header bar, and the menu icon misaligned lower as well, when in mobile (see screenshot).   Alignment is fine when viewing the full header on a desktop computer.  The misalignment only happens when you shrink the window to a mobile-size.

Any alternative code I can try?

Again, thanks so much for your help!

Hi,

Thank you once again for your quick response!

Unfortunately, that code did not solve the problem either.

Your revised code did successfully cause the mobile menu icon to be centered vertically.   But now, as I resize the browser window on my computer, from large to smaller, the websites changes and things get odd (Screenshot attached):

(1) showing the full header correctly in fullscreen (Good!) to
(2) showing the full menu text with a slightly smaller logo (this is ok), to
(3) breaking the logo and menu text into 2 lines (bad), to
(4) a very small logo when the browser when the browser is only slightly resized further, and the secondary social media bar disappears (both bad), to  
(5) a very small logo (bad) and the mobile menu icon (this icon is now centered vertically- good), with the social icons re-appearing, to 
(6) a bigger logo that is vertically off-center (it partially hanging below the header- bad), when resized to a mobile-sized browser window.

Again, I appreciate your work on this very much.   Is there another code combination you could offer to solve these issues?

Hi,

Thanks for your continued responses.

Unfortunately, this still isn't working.  If you go to http://www.responsinator.com/?url=biblicalmedia.co... , you'll see that the logo still turns small on the:

-iphone 5 landscape
-nexus 4 landscape
-the ipad portrait
-the kindle portrait

Also, the menu still breaks into 2 lines on the ipad landscape and kindle landscape.   

any other suggestions to fix these issues?

Hi,

It's getting better, that's for sure: 

Small mobile menu icon now vertically aligned - great

Bigger version of mobile logo, vertically aligned - great

The only two problems that remain are:

1. The menu still splits into 2 lines when the window width is shrunk to about 997 pixels in width (before transitioning back to one line with the smaller menu icon).

2. The social media menu bar disappears when the window width is between about 979-768 pixels in width (but it present at all other widths)

So yep, some issues are getting resolved, while those 2 still seem to persist. 

-Dave

Fantastic!

Thank you so much for your persistence.  Excellent tech support.

Thanks for being willing to try different solutions until it worked out.  

Much appreciated!