-
-
Website: one7.connernudd.com
I’m trying to create the effect of the attached images on my site, so that the logo is large without scroll:
https://postimg.org/image/s7m2q2z77/
and then the logo shows smaller when the menu is sticky:
https://postimg.org/image/3ll6gvjnl/
And displays like this on mobile:
https://postimg.org/image/3x36ny0sl/
As you can see on the current site, i’ve created the large logo with css, I had to add in a margin at the top to push the nav down but when the menu goes sticky i’d like it to be flush with the top again if possible!
Also I’m having some problems trying to add icons to the menu – As you can see from the attachments the navigation on the right has icons, I have tried multiple plugins and none seem to work.. Problem with some code being overwritten maybe?
Able to give you access to the site if needed to investigate further. THanks!
-
Hello,
I can not access your site. It shows “500 Internal Server Error”. Can you please be a bit more clear on what do you want to do to the menu?
As for the icons in menu item, sorry but this is a customization not included in theme support. Read more about it here.Best regards!
-
Hi Mihaila,
I don’t think I can be any clearer.. Have you seen the image links? You should be able to see the site now
-
Hello,
For this time i am sending your the code to add at your custom css box, but please keep in mind that these are style’s customization that are not included in support forum.
1-To add the logo in sticky header:.header_11.sticky_header #logo { display: block !important;} .header_11.sticky_header #logo img.dark { height: 85px !important; top: 97px !important; }
2-For the mobile header view:
@media (max-width: 480px){ #logo img { height: 100px !important; top: 100% !important; right: 95% !important;} .mobile_small_menu { left: 85% !important;} .mobile_small_menu .close { left: 85% !important;} .header_transparency header#header { background: rgba(97, 35, 35, 0.48) !important;} }
Best regards!
-
Hello Mihaila,
I’m having the same problem as connernudd so I’ll ask my question here.
I need to use a smaller version of my logo in the sticky header. So added the above styles in the styles.css but nothing happened. It still showing both logos in same size as before.
I hope you can guide me to solve this issue.
Regards
-
You must be logged in to reply to this topic.