- This topic has 10 replies, 4 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
I would like to use the Off Canvas menu on desktop as well as mobile but I would like to add a button adjacent to the left of the hamburger on desktop, similar to how this website has it.
https://webseo.co.za/avt-relaunches-with-a-new-look
I’m just not sure which settings I should use in Elements and/ Customization to achieve this.
Thank you
Customer Support
Hi there,
1. Edit your main menu and set the location to the Off Canvas Panel.
2. Create a new menu with a single item for your button. Follow this article on how to make it look like a button:
https://docs.generatepress.com/article/adding-buttons-navigation/
And set its location to the Primary Navigation.
Hi David
I will definitely try that method on my next project. I ended up using the above_header Element and added this snippet:
<body>
<p style=”text-align:center; color:#ffffff; background-color:#000000; margin-right:50px; margin-top:10px; height:40px;”><i class=”fas fa-phone”> <span style=”font-family: Roboto; font-weight:300;”>Talk With An Expert</span></i></p>
</body>
>>> site: https://streamline-integration.com/however, when I try and apply a background color to “body” for only just above_header the entire website body changes to that color.
i want the above_header background color to be white on this site: http://aguiarprofessionaltraining.com/
what is the element tag for above_header to apply css to only that area?
Thanks
It looks like you found a solution? If not let me know 🙂
Hi David
You must have not caught the 2nd half of my reply, here it is:
“however, when I try and apply a background color to “body” for only just above_header the entire website body changes to that color.
i want the above_header background color to be white on this site: http://aguiarprofessionaltraining.com/
What is the above header (GP Hook says “Before Header”) ….. css element so I can isolate background color to only that area?
Thanks”
Also…I updated GP Premium to the latest version but still I am seeing the old GP Hooks user interface, Elements is nowhere in WordPress dashboard. How do I resolve this?
Customer Support
Sorry are we looking at this area here?
https://www.screencast.com/t/w1tr8t8e5dIf so looks like it’s set to black (#000000) with the inline style?
Have you considered using the top bar widget area for that?
https://docs.generatepress.com/article/top-bar-widget-area/Let me know 🙂
Hi Leo
The site I referred to in my previous question is http://aguiarprofessionaltraining.com/
Whenever I change the “Body” background color in customize panel, the above_header (aka before header) area also changes the background color to the same color. I don’t want that….
I want to keep the body background color #071138 and be able to make the above_header area a different background color. How do I do that?
That is why I am asking for the css tag for just above_header or before_header ??
BTW – the element-style tag you pointed out only refers the bg color within the <p></p>, not the entire Before Header area.
This is the content I wrote “inside” the Before Header Hook:
<p style=”text-align:center; background-color:#709fdc; border: 1px solid #709fdc; margin-right:50px; margin-top:10px; margin-bottom:10px;height:29px;”><i class=”far fa-calendar-alt”> <span style=”font-family: Roboto; font-weight:300;”>2020 Event Registration</span></i></p>
I emailed a screenshot .jpg
Thank you
What if you do something like this in the hook element?
<div class="after-header-content"> your content here </div>Then target it with CSS:
.after-header-content { background-color: #709fdc; }You can upload screenshots with a service like this and provide the direct links here in the future:
https://postimages.org/Hi Leo
Ok I tried creating a custom class but it’s still not fully working right. I’m trying make the only the before header background white.
Here’s what I added to custom css:
.before-header-content {
background-color:#ffffff;
}Here’s what I added to the Before Header hook:
<div class="before-header-content"> <p style="text-align:center; background-color:#709fdc; border: 1px solid #709fdc; margin-right:50px; margin-top:10px; margin-bottom:10px;height:29px;"><a href="http://aguiarprofessionaltraining.com/event/apt-spring-conference-2020/"><i class="far fa-calendar-alt"> <span style="font-family: Roboto; font-weight:300;">2020 Event Registration</span></i></a></p> </div>Here’s the result: http://aguiarprofessionaltraining.com/
white is only showing to the right of my content:/
Lead Developer
I’m not seeing the
<div class="before-header-content"></div>part of the code: https://www.screencast.com/t/TuSyv2yY2ibCan you make sure it saved correctly?
- You must be logged in to reply to this topic.