Basic header multi rows center logo width size - Forum | JoomShaper
Solved SP Page Builder

Basic header multi rows center logo width size

Asked by Jeffrey Kiefer 3 years ago Last activity 3 years ago

Using default Helix Ultimate template under basic -> header -> multi rows I am unable to set the logo width. I also do not know where to find the place to change the header logo backround and heigth as the header -> height does not seem to have any effect.

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
3 years ago

No worries.

14 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Use this custom CSS


#sp-header{

    background: rgb(99 209 236) !important;
    height: 165px !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

-Regards.

Jeffrey Kiefer Asked this
3 years ago

No that increased the height of the main menu not the header area and did nothing to fix the logo issue.

Mehtaz Afsana Borsha Staff
3 years ago

Give me a screenshot of that portion which you want to increase.

Jeffrey Kiefer Asked this
3 years ago

Thank you for offering to help me with this. I haven't used center logos in SP Page builder and am now trying to master it, or at least not suck at it.
Included in the screen shot is an image of what I am trying to acheve. It is pretty simple and I am suprized that Helix is having a problem with it.
Here are the first 3 issue I am having.

  1. In the desktop version where do I set the size and color for the top row that contains the desktop logo?
  2. Where do I set the image dimentions for the desktop logo? As it is now it is not scaling correctly.
  3. In mobile view the top row is visable and does not "hide".

Screen Shots

Mehtaz Afsana Borsha Staff
3 years ago

Hi

You can set the logo height and width by using this custom CSS

.logo-image {
    height: 150px !important;
    width:100% !important;
}

For changing the background color and size use this one

#sp-header-topbar{
    height:200px !important;
    background-color:#0dcaf0 !important
}

Mobile topbar hide use this


@media (max-width: 844px){
#sp-header-topbar{
    display:none;
}
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Jeffrey Kiefer Asked this
3 years ago

Thank you but this is not working for me.

Jeffrey Kiefer Asked this
3 years ago

I have looked at this issue throughly and believe the issue I am having with the center logo not being able to expand horozonally is it is confined to the center column with a column on each side for socail media and contact info.
I have these two features turned off and the unused columns do not colapse.

Please tell me how I may fix this.

Mehtaz Afsana Borsha Staff
3 years ago

I dont understand which one is not working for you???

Jeffrey Kiefer Asked this
3 years ago

I can make the logo height work fine but the logo width does not work. As the above logo clearly shows.

Log in to reply.