Help with having button on header

[bryysemail]

Hello Everyone, I’m Bryan and I’ve recently took over developing a website for a company called Cavemen. I’ve imported a demo and alot of things were gone. One of which is a reservation button on my top nav bar. I’ve been trying to get that back but I don’t know where I should place my button code in order for it to show as a sticky button on the top nav bar. I’ve attached a photo and circled where I wish for the button to be. I’ve also linked my website below. I thank you all in advance.

Website: https://cavemen.com.sg

[Gandalf]

Your website seems to be giving Error 1020 access denied @bryysemail.

[bryysemail]

Hello gandalf. I’ve changed the firewall settings. All of you can enter the website now. I look forward to your replies thank you.

[droopsnoot]

Well, I can get in, but it doesn’t make the question much clearer. Your site code has a <nav> section where all the other menu entries are, so you would put it in there, just after the code for the login:

<li id="menu-item-3204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3204"><a href="https://cavemen.com.sg/my-account/" class="menu-image-title-hide menu-image-not-hovered"><span class="menu-image-title-hide menu-image-title">My Account</span><img width="24" height="24" src="https://cavemen.com.sg/wp-content/uploads/2020/04/Login-Icon_24-x-24.png" class="menu-image menu-image-title-hide" alt="" /></a></li>

You might be better posting in a more relevant section of the forum - I can’t see any PHP connection here, unless your page is generated by PHP, in which case it might be more useful to see the code.

Would it not be simpler to compare the current code to the earlier version that had the menu element that you need to restore?

[bryysemail]

Hi Droppsnoot. Yes the site is using the PHP language. The items on the top nav has been added using wordpress functions. Howevre, I’m trying to make the button sticky. This is so it remains on top even with mobile. I’ve attached a screenshot for how I wish for it to look on mobile. I cant find a way to make it appear there. If I just add the button the way I’ve added the rest of the things on the menu, it would be hidden with the rest of the items on mobile
Indeed comparing the 2 codes would be easier. However, the first code that contained the button has sadly been overridden when I’ve imported the demo without a backup. That was an error which I’ve realized too late.

Mobile:

The pointed button is where I wish for it to be. Thank you.

[Gandalf]

@bryysemail

Yes the site is using the PHP language.

But the problem doesn’t appear to be a PHP problem. I have moved this to the HTML & CSS forum where you’re more likely to get appropriate help. (If I’m wrong, we can move it back again )

[bryysemail]

Thank you Gandalf. This problem is more of I don’t know where the code is supposed to be instead of how to code it. I suppose it’s just coding a normal button am I right? It’s just where the button is placed in the source code that is going to make it sticky? Or do you think it was a plugin that was doing it before.

[PaulOB]

Hi, Don’t know id this is what you are asking but you could place the html code for the button as shown in the screenshot here in the devtools panel.

I just floated the button to the right (float:right;clear:right;margin:10px 0;) as you can see from the css rule in the top right of the panel. Add that css to the button id or class or whatever code you are using for the button.

At small screens it will look like this so tweak to suit.

The html was inserted here as seen in the code panel above.

<nav id="nav">			
<div id="cart">cart stuff ...</div>		

<button class="myButton" style="
    float: right;
    clear: right;
    margin: 10px 0;
">Button here</button>
    
<ul id="menu-navigation" class="primary-menu">				
etc...

[bryysemail]

Thank you Paul. This was what I was looking for.