How to reduce the width of the Logo and Main Menu Area - Support

Tagged: enfold, logo, menu, size

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
April 6, 2015 at 10:13 am #423855
omnivoroussoon
Participant
Hello,

I’m using Photography demo that has the Logo and Main Menu area on the left side bar. Can anybody help me to reduce the width of that area?

Also I’m wondering if I can use a different logo when I squeeze the web browser into a smaller dimension. My logo has a tagline that looks good in full size desktop screen, but it’s not readable in mobile view so I want to take that out.

Look forward to hearing from you guys!

Thank you.

Brandon
- This topic was modified 9 years, 7 months ago by omnivoroussoon.
April 6, 2015 at 1:45 pm #423910
Yigit
Keymaster
Hey omnivoroussoon!

1- Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
 .html_header_sidebar #top #header {
  width: 250px;
}
.html_header_left #main {
  margin-left: 250px;
}
```
2- Can you please post the link to your website?

Best regards,
Yigit
April 6, 2015 at 9:17 pm #424252

omnivoroussoon
Participant

Hi Yigit,

Thank you so much for your help.
I could solve the 1st issue.

I didn’t fully create the site using WordPress, but here’s the page you can take a look at the logo area.
http://omnisoon.com/about

Thanks again.

Brandon

April 6, 2015 at 9:30 pm #424261
Yigit
Keymaster
Hey!

Please try adding following code to Functions.php file in Appearance > Editor
```
add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(wp_is_mobile() )
    {
    $logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png";
    }
    return $logo;
}
```
and change the link to your logo that you would like to display on mobile

Cheers!
Yigit
April 6, 2015 at 10:44 pm #424294

omnivoroussoon
Participant

Hey Yigit,

Thanks for your quick response.
I tried to paste the code couple of different location but couldn’t still resolve it. Also I cleared cache and refreshed many times. Could you let me know the exact position where I need to paste your code?

Another question is in regards to the Logo and Main menu area again.
I was able to reduce its width in the full size screen. Thank you for your support. Can I adjust it’s width in tablet view as well? Looks like the breakpoint is setup between 768px and 989px, and I’d like to manage their size.

Look forward to hearing from you.

Best,

Brandon.

April 6, 2015 at 11:03 pm #424312
Yigit
Keymaster
Hey!

1- It should not be a problem but my personal favourite location is below following line
```
'bitcoin' 		=> array( 'font' =>'entypo-fontello', 'icon' => 'ue92a'),

));
```
I re-checked the code and it is working totally fine on my end. If you post temporary admin login credentials here privately, we can gladly look into it.

2- Please add following code to Quick CSS as well
```
@media only screen and (max-width: 989px) and (min-width: 768px) {
 .html_header_sidebar #top #header {
  width: 150px;
}
.html_header_left #main {
  margin-left: 150px;
}}
```
Regards,
Yigit
April 7, 2015 at 1:41 am #424375

omnivoroussoon
Participant

This reply has been marked as private.

April 7, 2015 at 5:19 pm #424842

Yigit
Keymaster

Hey!

I checked your website on my iphone but layout is not responsive. Can you please try de-activating all active plugins and check if that helps?

Cheers!
Yigit

April 7, 2015 at 6:56 pm #424891

omnivoroussoon
Participant

Thanks for your continuous support.
It really helps.

I went to Plugins, selected all plugins and deactivated all items, but looks like it’s still not working.
Could you provide me any other suggestion?

Also I see the small logo(smartphone version) when I open my site using iPad. The iPad menu bar is supposed to be the left side and the logo should be the normal version. Could you help me with this too?

Thanks again.

Brandon

April 8, 2015 at 2:03 pm #425283
Ismael
Moderator
Hi!

Add this to the functions.php file to switch logo:
```
add_action('wp_footer', 'ava_mobile_logo');
function ava_mobile_logo(){
?>
<script>
(function($){	
	$(window).resize(function() {
		if($(".responsive #top #wrap_all #header").css("position") == "relative" ){
			$('.responsive .logo img').attr('src', 'http://omnisoon.com/wp-content/uploads/2015/04/bar-logo.png');
		} else {
			$('.responsive .logo img').attr('src', 'http://omnisoon.com/wp-content/uploads/2015/04/logo_large_2501.png');
		}
	}).resize();
})(jQuery);
</script>
<?php
}
```
Regards,
Ismael
April 8, 2015 at 7:31 pm #425530

omnivoroussoon
Participant

Hey Ismael,

It works magically! I really really appreciate it.

One last change I’d like to make is that the Logo Area in tablet layout (about 768px to 989px) is too wide. It’s actually wider than full screen layout. Could you help me to adjust the size of that area? I want that space no wider than 216px.

Thanks!

Brandon

April 8, 2015 at 7:38 pm #425537
Yigit
Keymaster
Hi!

Please add following code to Quick CSS
```
@media only screen and (max-width: 989px) {
.responsive.html_header_left #main {
  margin-left: 216px !important;
}
.responsive.html_header_sidebar #top #header {
  width: 216px !important;
}}
```
Cheers!
Yigit
April 8, 2015 at 9:02 pm #425593

omnivoroussoon
Participant

Hi Yigit,

Thanks for your response.
I tried your code. It works to fix the width of the logo area under 216px.

However there’re 2 problems.
First of all, it didn’t work for smartphone layout. The horizontal menu doesn’t stack up above the main contents and it divides the page into two section; left is menu and right is contents.
Secondly, even though the area is fixed width, logo image and menu items are larger than full width.

Do you have any other suggestion?

Best,

Brandon

April 9, 2015 at 9:10 am #425763
Ismael
Moderator
Hi!

Try to replace it with this:
```
@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.html_header_left #main {
  margin-left: 216px !important;
}
.responsive.html_header_sidebar #top #header {
  width: 216px !important;
}}
```
Regards,
Ismael
April 9, 2015 at 11:34 am #425834

omnivoroussoon
Participant

Thank you Ismael,

That was a huge help.
I see the logo area is under 216 px in any screen dimension. And the smartphone layout also looking great.

One last push for the perfection.
I see the logo image suddenly becomes almost 2 times larger at the break point. I assume it’s between 768px to 989px. It’s actually critical because the iPad view will reflect this funky layout.

Is there way way that the logo and menu items size should be proportionally responsive?

I really appreciate your time and considerations.

Brandon

April 9, 2015 at 2:07 pm #425925
Yigit
Keymaster
Hey!

Please add following code to Quick CSS as well
```
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_header_sidebar .logo {
  padding: 40px !important;
}}
```
Regards,
Yigit
April 9, 2015 at 6:37 pm #426136

omnivoroussoon
Participant

Hey Yigit,

That’s awesome! Now I see the logo is consistent size in any screen dimension.
I think it’s good enough for now. I’ll tweak the menu bar section later if it needs to be improved.

Thank you.

Brandon
Author

Posts