- This topic has 15 replies, 3 voices, and was last updated 6 years, 11 months ago by
.
-
Posts
-
Logos are usually seen above the nav in GP and wordpress.
Is there a way for logo to be in the same line as nav?Also is there a way to insert a button that is same line as nav but right aligned?
(Is there a recommended button plugin with GP?)Thank you
Customer Support
Hi Scott,
You can set the navigation location to float right then it should be inline with the logo:
https://docs.generatepress.com/article/navigation-location/If you actually want the navigation next to the logo like the example link then set it to float right plus this CSS:
https://generatepress.com/forums/topic/menu-next-to-logo/#post-241435As for the button, you could try adding it into the navigation and just style it with some CSS. More info here:
https://docs.generatepress.com/article/adding-buttons/I tried inserting this CSS in the simple CSS area
.button.ghost,
.button.ghost:visited {
background: transparent;
border: 2px solid #FFF;
}.button.ghost:hover,
.button.ghost:active {
background: #FFFFFF;
color: #222222;
border: 2px solid transparent;
}Then I tried inserting this HTML in the header content area (with the right link and text)
<a class=”button ghost”
href=”LINK”>Your button textThe button didn’t work. It appears but it nothing happens when I hover over it and when I click it.
Did I call the button wrong?
Was I supposed to put the button html in a different area?Thanks
Hmm that should be right as long as you close the a tag with
</a>Let me know.
Yes I did that but it didn’t work for some reason.
I appreciate your help though.Where are you inserting the HTML?
Can you either provide the full code here or provide link to your site again?
I inserted it into Page header content and Section
The button in Section works like a button and behaves like a button
The button in Page header content looks like a button but does not behave like a button
.button.sun-flower, .button.sun-flower:visited { background: #F1C40F; color:#FFF; } .button.ghost, .button.ghost:visited { background: transparent; border: 2px solid #FFF; } .button.ghost:hover, .button.ghost:active { background: #FFFFFF; color: #222222; border: 2px solid transparent; }Lead Developer
You need to add the classes to the button.
You have:
<a href="http://">Your button text</a>It should be:
<a class="button ghost" href="http://">Your button text</a>Thanks!
No problem! 🙂
Hmm… it’s not working again…
Even links aren’t working in the header content area.
I used the right syntax because the buttons work when they are in the section areas but not in the header content area.
URL to the page?
Ok I figured out that the button doesn’t work when I include this CSS
.page-header-content:before {
content: “”;
width: 100%;
height: 100%;
background-image: url(url removed for forum)
background-repeat: no-repeat;
background-size: 100%;
background-position: center bottom;
position: absolute;
}This was used in another CSS solution
Add this CSS:
.inside-page-header-container { position: relative; z-index: 999; }Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!11
- You must be logged in to reply to this topic.