Issues Balancing modules in Header section

patvandenbosche

I created a module to hold quicklinks in the rightside of the Header section, and opted to use a flag logo on the left side of the Header section. However, I can't seem to get the spacing working at the bottom of the two modules. I'm attaching a screenshot so it will hopefully explain what I mean better than I can with words. I want the Header section to be even with the Slideshow directly underneath the menu and two modules. I've been working on it, adjusting css in dev tools, and just can't get it working.

Please tell me how it gets working. Thanks.

saguaros

patvandenbosche

It looks like you managed to get it solved, right?

patvandenbosche

Yes, but I don't think I need two logos on the top of the page. If I wanted to remove the logo in the middle of the menu, what would I use? I know this is a block, and I'm not sure what to do.

Thanks,
Pat

saguaros

Hi Pat,

I comment this JS code:

  	// if($('.t4-megamenu').length > 0) {
  	// 	if($(window).width() > 1600) {
  	// 		var numChild = Math.ceil($('.t4-megamenu .nav > li').size() / 2);

	  // 		$('.t4-megamenu > .nav > li').eq(numChild - 1).after($('.logo-wrap a'));
	  // 		$('.logo-wrap').hide();
  	// 	}
  	// }

in the file: /templates/ja_resort/js/template.js

Kindly check.

patvandenbosche

If I comment out these lines, what keeps it from getting overwritten the next time there's an update? I am going to try it now to see how the site will look without two logos, and that's easy enough to keep a copy of the original file. But I am thinking about the future. I always have had this issue with the JA Resort template.

Thanks,
Pat

patvandenbosche

I made a slight change to the top of the screen and discovered the logo is still showing in the menu. I want to remove the logo which now resides at the beginning of the main menu line, leaving only the logo to the far left of the top of the screen. This is shown in the screenshot attached.

saguaros

patvandenbosche

You can use this custom CSS to hide logo in the menu:

.mainnav-wrap .logo-wrap {
    display: none;
}

patvandenbosche

That got rid of the extra logo and freed space on the header, but I need to get the mini-logos in head-action in one line, and want to keep the different background color. When I had button as the class, the height worked, stayed in line with the dark blue portion of the menu. But I needed a wider space, with logos all on one line. So I changed the class from button to a special class just to set the background, and now the box doesn't sit on top of the slides precisely, but has a space under it before the slideshow begins. Help! This header is driving me mad! And I've spent days working on it. Everything else works on the header the way I want it to work except for this empty space issue below head-action.

Can this class be changed back to button but have it wide enough to show all 3 little logos in a single line? Just when I think I've gained some knowledge... well, a little knowledge can be a dangerous thing with me. LOL

patvandenbosche

I think I've got it working now on a desktop, but still trying to figure out how to show the logo from header-info on a mobile device. Do you have any suggestions to make that work? I added a logo module, set it just for Home and only on mobile devices. It shows on a desktop, with two logos, but I get a logo on the mobile devices.

When I unpublish the mobile logo module, it works better, but I have a hamburger symbol with the main menu, so two menus and only one logo on desktop, but only hamburger menu on mobile and no logo on the mobile version.

Please tell me what I'm doing wrong! Thanks.

patvandenbosche

I figured out some of my issues in the header, but not all. If I use the hamburger (off-canvas) menu in a mobile device, it comes up dark green, a color from the original template palettes. I no longer use that color and I don't know where to make this change to dark blue... or any other color.

The other issue is the spacing under the beige module header-action which shows 3 icons, other sites for the city. I need to make sure it goes all the way down. I honestly do not know what I did that made it change, but I've been touching any and everything in the header tonight.

Thanks.
Pat

saguaros

patvandenbosche

You can try to set the height for the module on the right:

.bgcolor2022 {height: 125px;}

To change color of off-canvas, try this:

.t4-offcanvas .t4-off-canvas-header {background: #030354;}
.t4-offcanvas .t4-off-canvas-body {background-color: #030354;}

patvandenbosche

I think with all of your help and my stumbling around I've just about got the header issues resolved so that both a full desktop screen and a mobile device will display correctly. Of course I will have more things to fix, but this part of the template has always been a headache for me. I like the idea of a logo in the middle, but not when it is a block. I've become so dependent on the T4 framework, I don't even like other companies' templates. Thank you for all your assistance with this, but don't worry, I'll be back with more questions.

Pat

saguaros

patvandenbosche Feel free to let me know if you need other help 🙂