- This topic has 15 replies, 2 voices, and was last updated 5 years, 10 months ago by
.
Hi Shufflehound,
I’m trying to add a full width horizontal logo at the top like this one for Romex:
To the new site for Romex Canada. Currently in production here:
http://romex.mrvandigital.com/
What’s the best way to achieve this while keeping it responsive and appearing on all pages?
Thanks!
Solution for this topic
Hi @MrVanDigital,
I hope you are well today and thank you for your question.
To achieve this you have to use smaller logo and develop custom CSS code as shared below that you can use by adding in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-header-top { background-image: url("http://www.romexusa.com/assets/templates/romex/assets/img/layout/bg_header.jpg"); background-repeat: repeat-x; background-position: left top; padding-top: 0; } .header-contacts.sh-table-cell { float: left !important; height: auto !important; display: block; } .sh-header-top .sh-table-cell:first-child { float: right !important; }Best regards,
Shufflehound teamThanks so much for this. We’re getting closer!
The weird thing is I’ve made the logo the same height as the stripes (100px) but it is still being placed as being bigger. Any ideas?
http://romex.mrvandigital.com/
Thanks again for your quick help!
I’ve duplicated the home page to test out different settings but I’m still getting the same issue there:
http://romex.mrvandigital.com/home-new-2/
Any help appreciated! Thanks.
Also, will the gray gaps by the side of the sliders go away if I upload images that are bigger? These are 1200 x 800. For desktop large, there are sizes 1920 x 950 px. I guess this is more of a slider revolution question!
I’ve duplicated the home page to test out different settings but I’m still getting the same issue there:
Your shared site is not accessible for me and displaying the error so could you please make sure that it is accessible so that I can help you?
Also, will the gray gaps by the side of the sliders go away if I upload images that are bigger?
Yes but you have to also change slider width to flexible in the slider settings.
Sorry I missed the manual header settings where you can play around with this. My apologies!
Another question though: how do you turn the logo off for mobile?
Solution for this topic
Sorry I missed the manual header settings where you can play around with this. My apologies!
Not an issue. I can see it is displaying fine on your site now as shown in the attached screenshot.
Please advise.
Another question though: how do you turn the logo off for mobile?
You can hide it using below custom CSS code.
@media (max-width: 1024px){ .header-logo { display: none; } }Thanks again Shufflehound.
I have another question: with header 4 selected, how can I make it so the top menu is more visible along with the icons on first load? When you start to scroll, they have a solid colour behind them and so you can see them but when they first load, you can’t as there’s no shadow behind the text/icons or solid colour bar.
See here: http://romex.mrvandigital.com/
Thanks!
Another question: how do I get rid of the white border around the top that appears on mobile (see attachment) and adds a thin strip of white around the top border on desktop? I’ve played around with all the settings but can’t find it. Is there a guide to the different settings and which area they affect? I’ve been through your documentation but haven’t found one.
Solution for this topic
I have another question: with header 4 selected, how can I make it so the top menu is more visible along with the icons on first load? When you start to scroll, they have a solid colour behind them and so you can see them but when they first load, you can’t as there’s no shadow behind the text/icons or solid colour bar.
You can use below CSS code to apply light background on menu.
#page-container .sh-header.sh-sticky-header.sh-header-small-icons:not(.sh-sticky-header-active) { background: rgba(74, 69, 69, 0.47)!important; }Another question: how do I get rid of the white border around the top that appears on mobile (see attachment) and adds a thin strip of white around the top border on desktop? I’ve played around with all the settings but can’t find it. Is there a guide to the different settings and which area they affect? I’ve been through your documentation but haven’t found one.
There is hamburger menu there which you can display using below CSS code as shown in the attached screenshot.
.primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger:not(.is-active) span, .primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger span:before, .primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger span:after { background-color: rgba(80,80,80,1) !important; }If you have more questions then to help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.
Thanks so much on the first one regarding making the icons and links more visible. I’ll start a new thread with the follow up to the second question. Thanks again!
You are most welcome 🙂
Jumped the gun a bit…
It works great for the homepage but for all others on mobile, I get the transparent top background e.g. this test page: http://romex.mrvandigital.com/homeowner/
How can I get it to behave like this on mobile for all pages and posts?
Thanks!
To do that try using below custom CSS code.
.primary-mobile-light .sh-header-mobile { background-color: #fff!important; }
