[Resolved] Navigation and top bar questions

[Harris]

Hello

Your valuable help in two things please

1. How can I achieve what is shown above in the top bar? To describe it in words is a part of the bar placed assymetrical (not centered or left / right aligned) that consists of an image background and has in it some text and images.

2. How can I achieve having the last menu choice shown as button (as shown above)? Is it better to add a button after the navigation using the hooks or is there a way to have it as a menu choice and use CSS to make it look like a button?

Thanks in advance
Harris

[Leo]

Hi there,

1. I would use the Before Header hook instead:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

Insert something like this:

<div class="custom-top-bar grid-container grid-parent">
    <span class="top-bar-text">
        something here
    </span>
    <span class="top-bar-icon">
        icon here
    </span>
</div>

With some CSS:

.custom-top-bar.grid-container {
    max-width: 500px;
    margin-right: 400px;
    background-image: url(https://URL-here);
}

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

2. This should help: https://docs.generatepress.com/article/adding-buttons-navigation/

A link to your site will help if you need further assistance. Thanks!

[Harris]

Hello Leo,

Thanks for your assistance. Everything is achieved following your instructions.

One last thing. How can we handle the top bar to look properly in various media sizes (especially small ones)?

Thanks
Harris

[Leo]

Hmm try this additional CSS:

@media (max-width: 768px) {
    .custom-top-bar.grid-container {
        margin-right: auto;
    }
} 

Can you link me to the page if this doesn’t work? Thanks!

[Harris]

Hello Leo,

It doesn’t really work as it breaks the top bar in two lines on mobiles.

Thanks!

P.S. By the way, can we have the copyright bar without having a footer?

[Leo]

Ok sorry let’s try a different approach.

Try this in the hook instead:

<div class="custom-top-bar grid-container grid-parent">
    <div class="top-bar-text grid-50 tablet-grid-50 mobile-grid-100">
        something here
    </div>
    <div class="top-bar-icon grid-50 tablet-grid-50 mobile-grid-100">
        icon here
    </div>
</div>

and this is the CSS:

.custom-top-bar.grid-container {
    max-width: 533px;
    margin-right: 230px;
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .custom-top-bar.grid-container {
        margin-right: auto;
    }
    .top-bar-text, .top-bar-icon {
        text-align: center;
    }
}

[Harris]

Hello Leo,

It doen’t show at all now.
Thanks
Harris

[Leo]

I just tried the HTML and CSS I provided above and it should work nicely.

You would need to replace “something here” and “icon here” to your actual content.

If nothing shows still can you leave the code in so I can see what’s wrong? Thanks!

[Harris]

edited – read next one please

[Harris]

Just managed to make it show.
It’s not formated properly though and it displays in 2 lines in desktop resolution.

[Leo]

Sorry my example content is misleading.

The class grid-50 gives you a column. So basically we are creating 2 columns inside the 510px container.

The phone icon and number should go into the first column and then the hours should go into the second column so they will show up in one row.

You can also try using GP’s built in FontAwesome icons instead of image icon: http://fontawesome.io/icons/

[Harris]

Hello,
I think I managed it but there s are still two issues
1. The content of the second column is longer so it breaks to a second line (even in large screens).
2. In mobile screens we get two rows

Thanks
Harris

[Leo]

Try increasing the width from 510px to something like 560px

You can also create different width columns since the content in the first column is shorter. So instead of both using grid-50, try the grid-40 and grid-60 combination then we should be pretty close.

I will have another look after this for the mobile part 🙂

[Harris]

Hello,
After playing arround with your instructions I managed to make it look OK in desktop screens.
The mobile screen issues still exist though.

Thanks
Harris

[Leo]

Is the facebook icon meant to be on the line below the hours? If you change the width to 530px it should move it up.

As for mobile, I would just set a background color instead using the background image and center them:

@media (max-width: 768px) {
    .custom-top-bar.grid-container {
        background-color: #000000;
        margin-right: auto;
    }
    .top-bar-icon, .top-bar-text {
        text-align: center;
    }
}

[Author]

Posts