[Resolved] Navigation and top bar questions

Home Forums Support Navigation and top bar questions

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #365600
    Harris

    Hello

    header+topbar

    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

    GeneratePress 1.3.48
    GP Premium 1.4.2
    #365725
    Leo
    Staff
    Customer Support

    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!

    #365821
    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

    #365844
    Leo
    Staff
    Customer Support

    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!

    #365851
    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?

    #365934
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #366229
    Harris

    Hello Leo,

    It doen’t show at all now.
    Thanks
    Harris

    #366512
    Leo
    Staff
    Customer Support

    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!

    #366519
    Harris

    edited – read next one please

    #366527
    Harris

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

    #366552
    Leo
    Staff
    Customer Support

    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/

    #366578
    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

    #366585
    Leo
    Staff
    Customer Support

    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 🙂

    #366598
    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

    #366607
    Leo
    Staff
    Customer Support

    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;
        }
    }
Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.