Archived topic

Using Off Canvas Menu on desktop with a button

10 replies · Started by Cynthia on February 12, 2020

Viewing posts 1–11 of 11

February 12, 2020 at 12:18 am #1162542

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

February 12, 2020 at 5:18 am #1162777

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.

February 21, 2020 at 8:11 pm #1173214

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>
 Talk With An Expert
</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

February 22, 2020 at 7:46 am #1173662

It looks like you found a solution? If not let me know :)

February 23, 2020 at 12:30 pm #1174630

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"

February 23, 2020 at 1:28 pm #1174664

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?

February 23, 2020 at 1:40 pm #1174672

Sorry are we looking at this area here?
https://www.screencast.com/t/w1tr8t8e5d

If 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 :)

February 23, 2020 at 5:11 pm #1174756

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 , not the entire Before Header area.

This is the content I wrote "inside" the Before Header Hook:

2020 Event Registration

I emailed a screenshot .jpg

Thank you

February 23, 2020 at 8:12 pm #1174822

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/

February 23, 2020 at 10:44 pm #1174850

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">&nbsp;&nbsp;<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

February 24, 2020 at 9:31 am #1175480

I'm not seeing the <div class="before-header-content"></div> part of the code: https://www.screencast.com/t/TuSyv2yY2ib

Can you make sure it saved correctly?

This archived topic is closed to new replies.

Start building better websites today.