Joomla Templates Club 406,261 posts

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#205528

The default header height in Uber 2.1 is 100px with top/bottom padding of 26px and the Container/Row class height (where the logo and menu names go) is 52px.

I would like to increase the height of the container/row class to a higher number (60px up to 70px) and reduce the top and bottom padding of the default header to 5px, reducing the overall height of the header from 100px to somewhere between 70px and 80px, depending on the height of the container/row class.

I am using ACM header 4, is this the correct section to reduce the padding (and what do i change)

.uber-header.header-4 {
height: 100px;
padding-top: 26px;
padding-bottom: 26px;
border-bottom: 1px solid #dadedf
}

What code do I use to use/change the height allowed for the container/row class?

In summary, the aim is to allow more height for the logo image (currently restricted to 52px) and reduce the top and bottom padding in the main header area to achieve a smaller overall height but a larger height for the logo within that smaller overall height value. The current width allowed for the logo is fine at 130px as my logo is 90×52 and there is enough room to increase the width pro-rata when the height is more.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#566936

Well, the above CSS rule would be correct to reduce the padding for the header and/or increase the header size.

To modify the dimensions of your logo image, try the following:

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_uber/css/

Within that custom.css file, paste the following CSS rule:


div.logo-image img {
height: 80px;
width: 100%;
}

Modify the height and width parameters to fit your needs.

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Hope That Helps.

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#566970

Thank you Tom, I created a new logo image with size 126×70 (the previous logo was 90×52 to fit into the default uber template max height allowed) and tried various combinations of the suggested (and other code) to display the new logo correctly.

The desired header height and padding only works with this code (light-colour and affix-top for the version of Style 4 I am using:

.uber-header.header-4.light-color.affix-top {
height: 80px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #dadedf
}

The header height of 80 less top and bottom padding of 5 each leave a desired logo height of 70px (as in the new logo image).

Edit-Update:

I also need to use the following codes to keep the same height/padding on Scroll and Non-Sticky options:

.uber-header.header-4.light-color.affix {
height: 60px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #dadedf
}

.uber-header.header-4.light-color {
height: 60px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #dadedf
}

The following (first 2) codes below increase the height of the Container/Row to 70px and the final code should increase the Logo Image to the same value, but the height of the image remains at 52px even when the code change in ‘Inspect Element’ on Chrome suggests it should be fine (see screencast below) and the live image is compressed, making the width too big:

div.logo {
height: 70px;
}
div.logo a {
height: 70px;
}
div.logo-image img {
max-height: 70px; (this code is not working live but does work in Chrome test)
}

The screencast http://www.screencast.com/t/UdOmS8Ey9w shows what I am trying to achieve and the code for each section. I would like:

1. The header height to be 80px with top and bottom padding of 5px each (this is working)
2. The height of the Container/Row to be 70px to match (80-5-5=70) (this is working)
3. The height of the Image to be 70px height and 126px width (this is not working live, only in Chrome test – see screencast)
4. All the menu items to move down slightly and be centered within the new size of the container/row (how do I do this, as they are above the centre line of the new/bigger container)

There may be a more efficient way to do it than my attempt above, help to solve the puzzle appreciated.

Note: I will only use the header height/padding top/padding bottom options at 60px/4px/4px to keep everything in line with the current default max logo height of 52px until a solution is available.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#567816

Your site seems to look fine now, let me know if you still need help on this

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#732922

Your site seems to look fine now, let me know if you still need help on this

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#568063

Unfortunately I could not get it to work Saguaros, the item 1-4 list and screencast in my last post is still valid and as the 126×70 image is auto reduced to a height of 52 for some reason I had to adjust the affix-top code dimensions from 80-5-5 to 60-4-4 to keep everything in balance (this is the header layout you would have seen yesterday, as per the last sentence in my previous post).

I am trying to find the correct method for using a 126×70 logo that fits into a container of the same height and a header height of 80 with top and bottom padding of 5. The larger logo means the menu names and top edge of the dropdown menus are too high up so they need to be moved downwards a little, is there a simple way to do that or does each menu need to be moved down individually?

Everything works perfectly with a 90×52 logo and container height 52 and a 60-4-4 dimension for the header, with the menu line in the correct place and the top edge of each dropdown menu aligned with the bottom edge of the header.

I am trying to get the same effect with a 126×70 logo but if it is too complicated a process I may have to live with a smaller logo as in the default layout.

I have altered the header/container/logo dimensions to match my previous post to make it easier to see what is happening in case there is a solution, obviously any help is much appreciated.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#568322

At this moment, I see that the logo image on your site still keeps the max-height: 52px property so that the height still is 52px.

You can open the custom.css file in template folder, look for this css rule:


div.logo-image img {
max-height: 70px;
}


change it to:


div.logo-image img {
max-height: 70px !important;
}


[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#568483

Thank you Saguaros, that worked for the logo, it looks fine now.

Ref the navbar settings to centre the menu names and make the dropdown menu start at the bottom of the navbar, I tried a few different variations (to try and keep the code to a minimum) before arriving at this reduced solution (compared to my initial post), that also keeps the logo height at 70px for all devices and also aligns the toggle/dropdown menus correctly in the same way on smaller devices:

@media (max-width: 810px) {
.uber-header.header-4.affix {
position: static;
}
}
.navbar-default .navbar-nav>li>a {
min-height: 70px;
padding: 24px 26px;
}
.navbar-toggle {
height: 70px;
line-height: 70px;
}
.uber-header {
height: 80px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
border-bottom: 1px solid #dadedf
}
div.logo {
height: 70px;
}
div.logo a {
height: 70px;
}
div.logo-image img {
max-height: 70px !important;
}

It works, but is the above code technically correct and also the most efficient way to code to:

1. Keep a logo of 126×70 visible on all devices
2. Keep the menu names (and toggle menu on smaller devices) as close as possible to the centre (of the navbar height)
3. Start the dropdown menu at the bottom of the navbar on all devices
4. Have sticky menu on larger devices and static on smaller devices (the 810px width is used for Kindle HD device ref other thread)

Thank you again for your help.

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#568674

It is not quite finished, it is fine when not logged in but pushing the menu down below the navbar for logged in users that are not on smaller devices (the smaller devices are working correctly when logged in or not).

I removed all the custom.css code shown in my post above and started putting them back in one by one to identify the problem starting with the logo code and it is the !important part of the logo code that is causing the problem when logged in on larger screens:

div.logo-image img {
max-height: 70px !important;
}

I assume I need the correct navbar adjustment to compensate for adding !important to the logo code to make it visible?

UPDATE

If I make position-right for the menu item !important and reduce the default width from 52px to 50px that works:

.navbar-default .navbar-nav>li>a {
padding-top: 24px;
padding-bottom: 24px;
padding-right: 50px !important;
}

Anyway, i have a solution that works for logged in/out with the 126×70 logo as follows:

@media (max-width: 810px) {
.uber-header.header-4.affix {
position: static;
}
}
.navbar-default.navbar-nav>li {
min-height: 70px;
}
.navbar-default .navbar-nav>li>a {
padding-top: 24px;
padding-bottom: 24px;
padding-right: 50px !important;
}
.navbar-toggle {
height: 70px;
line-height: 70px;
}
.uber-header {
height: 80px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
border-bottom: 1px solid #dadedf
}
div.logo {
height: 70px;
}
div.logo a {
height: 70px;
}
div.logo-image {
height: 70px;
}
div.logo-image img {
max-height: 70px !important;
}

It is probably not the best way to do it, if you a more efficient coding solution please let me know.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#568782

Yeah. I see that it works fine now. Let me know if you need further help

Have a nice day!!!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#733875

Yeah. I see that it works fine now. Let me know if you need further help

Have a nice day!!!

[Author]

Posts