Header Height Reduction

[CloudColor]

I like the transparency of the header but the height is too much before scrolling. I would like to make the header a smaller height. Please provide me with the CSS to do this.

Thank you.

[FocuxTheme Support]

You need to adjust the following CSS, and edit js code.

For example, reduce the height of header to 70px, put the code into Samsara options > Custom style > CSS code

#top{height:70px;}
#logo a{height:60px;margin-top:0;}
#primary-menu{margin-top:19px;}
#primary-menu > ul > li{height:40px;}
.tools{margin-top:8px;}

Then, edit js/jquery.samsara.js file, you will find the following code

 function nav_shrink(){
	 if($(window).width()>767 && no_shrink!==1){
      top.removeClass('top-opacity').addClass('nav_shrink').css({'height':60});
	  logo.css({'width':logoWidth-20,'backgroundSize':"85% auto"});
	  primary_menu.css('margin-top',8);
	  primary_menu_item.css('height',41);
	  primary_sub_menu.css('top',32);
	  tools.css({'margin-top':2,'height':30});
	  tools_item.css({'height':30,'width':30,'backgroundSize':'15px auto'});
	  if(top.next().html().indexOf("#top,.fullscreen_stage,#primary-menu ul ul,body .portfolio-slider.flexslider{background-color:#ffffff;}")>0){
		top.addClass('box-shadow');
		primary_sub_menu.addClass('box-shadow');
		tools_item.css('background-color',top_color);
      }
	 }else{
      top.removeClass('top-opacity');
	 }
   }
   function nav_expand(){
    if($(window).width()>767){
	  top.addClass('top-opacity').removeClass('nav_shrink').css({'height':90});
	  logo.css({'width':logoWidth,'backgroundSize':"100% auto"});
	  primary_menu.css('margin-top',24);
	  primary_menu_item.css('height',55);
	  primary_sub_menu.css('top',51);
	  tools.css({'margin-top':12,'height':40});
	  tools_item.css({'height':40,'width':40,'backgroundSize':'20px auto'});
	  if(top.next().html().indexOf('#top,.fullscreen_stage,#primary-menu ul ul{background-color:#ffffff;}')>0){
		tools_item.css('background-color','rgba(255,255,255,0.4)');
		top.removeClass('box-shadow');
		primary_sub_menu.removeClass('box-shadow');
      }
	 }else{
	  top.addClass('top-opacity');
	 }
   }

You can see there are many CSS value like margin-top and height in the js function, you should adjust these values by yourself.

Thanks!

[CloudColor]

Hello,

Your instructions are great. I only now need help with the search button icon. It is slightly too big when the nav expands. Just the icon of the magnifying glass for search. How can I fix this?

[FocuxTheme Support]

Did you mean you want to reduce the icon size or the search button size?

[CloudColor]

I mean a small portion of the bottom of the black search icon button. The circular button with the magnifying icon is slightly visible below the menu now.

[FocuxTheme Support]

If I understood correct, you can try the following CSS

.tools ul li a{width:30px;height:30px;}

By the way, you can find the CSS selector with chrome developer tool if you want to customize the theme. Watch this video https://www.youtube.com/watch?v=V2aAEzlvyDc

[CloudColor]

Hello,

thank you for the CSS tip.

I decided to also use the “Hide The Navigation Bar” option for most of my pages, but it’s not working. I have selected yes, but the header is still there before scrolling.

[FocuxTheme Support]

Hi

What’s the current version of your theme? Is it the latest version?
Is it possible to tell me your link and login details with private reply that I can check it in backend?

Thanks

[CloudColor]

This reply has been marked as private.

[FocuxTheme Support]

Hi

Not sure why I can’t login, it shows “ERROR: Incorrect username or password.”

[CloudColor]

I apologize. perhaps I did not past the password correctly. It works now. Thank you.

[FocuxTheme Support]

I see.

Only when you have set the header image for the pages, then, the navigation bar can be hidden.

[CloudColor]

I’ve set the header image for the page, but the header is still not hiding.

[FocuxTheme Support]

I tried to hide the navigation after I set header image for LOGOS page, the navigation is hidden until you scroll the page.
Remember you must select Yes for “Enable Custom Style” option at the same time.

[CloudColor]

Thank you for all your help, I would like to hide the header on the home page. Also, I still see the header on the “Logo” page before scrolling. Im using Firefox.

[FocuxTheme Support]

1. For hide the header from homepage, as my last reply, you haven’t enable custom style after you select yes for hide the navigation bar, check the following picture:

2. For LOGOs page, you haven’t set the page header image, looking at my old reply

Only when you have set the header image for the pages, then, the navigation bar can be hidden.

So, just set the header image first for the inner page.

Do I make any sense?

[Author]

Posts