[Resolved] can logo be same line as navigation and right aligned button?

[sdanbu]

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

GeneratePress 1.3.46

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sdanbu]

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

[Leo]

Hmm that should be right as long as you close the a tag with </a>

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sdanbu]

Yes I did that but it didn’t work for some reason.
I appreciate your help though.

[Leo]

Where are you inserting the HTML?

Can you either provide the full code here or provide link to your site again?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sdanbu]

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

Your button text`

.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;
}

[Tom]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[sdanbu]

Thanks!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[sdanbu]

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.

[Tom]

URL to the page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[sdanbu]

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

[Tom]

Add this CSS:

.inside-page-header-container {
    position: relative;
    z-index: 999;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[sdanbu]

Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!11

[Author]

Posts