Is there a way to not use the Masthead area?
Permalink Browser Info Environment
I am always grateful for your help.
Is there a way to not use the Masthead area?
If you use the site name as an image, the position of the image will change slightly by scrolling, and if you use a hover image in the image block, the size will change when you hover the mouse cursor.
It doesn't look good because the width of the top menu changes with scrolling.
Is there a way to change it in the settings?
We apologize for the inconvenience and thank you for your understanding.
Is there a way to not use the Masthead area?
If you use the site name as an image, the position of the image will change slightly by scrolling, and if you use a hover image in the image block, the size will change when you hover the mouse cursor.
It doesn't look good because the width of the top menu changes with scrolling.
Is there a way to change it in the settings?
We apologize for the inconvenience and thank you for your understanding.
| Type: | Discussion |
|---|---|
| Status: | Resolved |
Thank you for contacting us.
I entered the design CSS for the site name image, but it doesn't work.
How about not using the Masthead area?
The width of the part of the top menu bar changes as you scroll the screen.
It's also happening on the juniper demo site.
Is there a way to keep scrolling the width of the top menu bar unchanged?
Thank you for your understanding.
I entered the design CSS for the site name image, but it doesn't work.
How about not using the Masthead area?
The width of the part of the top menu bar changes as you scroll the screen.
It's also happening on the juniper demo site.
Is there a way to keep scrolling the width of the top menu bar unchanged?
Thank you for your understanding.
Hello,
I'm not sure if you mean the area that on the demo has a telephone number at the top of the menu? If so, then just delete any content that is in "Sitewide Masthead Left Area" and "Sitewide Masthead Right Area" . If it is empty, it will not show.
The menu shrinks when scrolling as can be seen in the demo. If you don't wish it to do this, then you can change the CSS. For example, please see the CSS below:
You may need to make changes to suit your needs, and can check the styles using a CSS inspector, for example Firefox CSS inspector (please see below).
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to...
Thanks,
Jennifer
I'm not sure if you mean the area that on the demo has a telephone number at the top of the menu? If so, then just delete any content that is in "Sitewide Masthead Left Area" and "Sitewide Masthead Right Area" . If it is empty, it will not show.
The menu shrinks when scrolling as can be seen in the demo. If you don't wish it to do this, then you can change the CSS. For example, please see the CSS below:
@media (min-width: 992px) { div.ccm-page .navbar-fixed-top.opaque { min-height: 120px !important; } div.ccm-page .navbar-fixed-top.opaque .navbar-nav > li > a { padding: 50px 25px !important; } div.ccm-page .navbar-fixed-top.opaque .navbar-brand > img { max-height: 60px !important; margin-top: -15px !important; } div.ccm-page .navbar-fixed-top.opaque a.navbar-brand { padding-top: 45px !important; } }
You may need to make changes to suit your needs, and can check the styles using a CSS inspector, for example Firefox CSS inspector (please see below).
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to...
Thanks,
Jennifer
I am always grateful for your help.
The situation where the width of a part of the top menu bar changes when scrolling the screen has been improved.
However, the matter of the logo image is not solved.
Logo image link I gave up hovering, but can't I center the logo image?
Even if you try to center it from "Design & Block Template", the location will shift significantly.
Please let me know if there is a way to center the logo image on the top menu bar like the image.
Thank you for your cooperation.
The situation where the width of a part of the top menu bar changes when scrolling the screen has been improved.
However, the matter of the logo image is not solved.
Logo image link I gave up hovering, but can't I center the logo image?
Even if you try to center it from "Design & Block Template", the location will shift significantly.
Please let me know if there is a way to center the logo image on the top menu bar like the image.
Thank you for your cooperation.
Hello,
The logo should be centered without applying any styles to it. If you send me a link to your website, then I can check what is interfering with the theme styles.
Please note, this support thread is public, so if you would like to send the link privately, either pm us or email contact@pilipalawebdesign.com.
Thanks,
Jennifer
The logo should be centered without applying any styles to it. If you send me a link to your website, then I can check what is interfering with the theme styles.
Please note, this support thread is public, so if you would like to send the link privately, either pm us or email contact@pilipalawebdesign.com.
Thanks,
Jennifer
We become indebted to.
We have sent the URL by Private message , so please check it.
We have sent the URL by Private message , so please check it.
Always I am indebted.
how about after that?
Did you confirm that the logo image is in the center?
Thank you.
how about after that?
Did you confirm that the logo image is in the center?
Thank you.
We become indebted to.
The logo issue has improved.
By clearing the Homeno link.
Thank you very much.
The logo issue has improved.
By clearing the Homeno link.
Thank you very much.
Great! Thanks for letting us know.
Best, Jennifer
Best, Jennifer
There are no alternative options for logo location in the top menu in the theme. You can adjust the CSS to suit your image, use a different size logo image, or use text instead of a logo.
The logo styles are in topmenu.less located here \juniper\themes\juniper\css\build but it is best to make the changes in the dashboard. When you are logged into your website, click on the cog icon > design > customize > scroll down the left menu and click on the gear icon by custom CSS. Then you can add the below CSS and click "save" and then "save changes".
The styles for the logo area are a bit fiddly. You may need to adjust the styles in the CSS we have provided above to suit your image, and test your website in different devices to make sure it looks how you want.
Thanks,
Jennifer