Archived topic
can logo be same line as navigation and right aligned button?
15 replies · Started by sdanbu on May 6, 2017
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
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-241435
As 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 text
The 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;
}
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