[Resolved] Page header/menu

Home Forums Support [Resolved] Page header/menu

Home Forums Support Page header/menu

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #575773
    Andrei

    I need to make the header, meniu navigation like here – https://www.gahumanresources.co.uk/about-gahumanresources/contact-us/

    How I can add that blue button so that it can be separated from the rest of the menu, how I can add the logo so that it will be on the same line with the menu, at this moment the logo is higher than the menu…

    Can I add that blue line under title page?

    GeneratePress 2.1.1
    GP Premium 1.6.2
    #575955
    David
    Staff
    Customer Support

    Hi Andrei, lets try this:

    1. Set-up navigation, Customiser > Layout > Primary Navigation:
    Set Navigation width and Inner Navigation Width to full. Navigation alignment left.
    Add Navigation logo and set to Sticky & Static.
    Now set the colors for the nav – this will be used on for the Sticky navigation

    2. Adding a button to menu by giving that menu item a class:
    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Then add your CSS e.g:

    .main-navigation .my-custom-class a {
        border-radius: 30px;
        background-color: #08C;
        color: #fff;
        float: right;
        /* other CSS for your button */
    }

    3. Now head to Dashboard > Page Headers and create & name a new page header.
    Image Tab > add a background image, or leave this empty to use the pages featured image.
    Content tab > add this to the editor:

    <h1>{{post_title}}</h1>
    <span class="db-title-divider"></span>

    Now select Add background image, Add padding, Container: Full width, Text Alignment Center, Top & Bottom Padding: 150px.

    Advanced tab > select merge with site header. And then select Custom Navigation Colors where you can now set the nav background to transparent etc.

    You can then assign this page header to all Pages through the Page Header > Global Locations or individually on each page in the editor under layout.

    4. Then the CSS for your title divider:

    .db-title-divider {
        width: 80px;
        border-bottom-width: 6px;
        margin: 10px 0;
    }
    #576020
    Andrei

    I followed your tutorial, but the result isn’t like that example.
    Do you wish to take a look over the website?
    How I can share the login credentials?

    #576026
    David
    Staff
    Customer Support

    Hi Andrei, if the site is open you can share a link in the field provided here. And i can have a look at the front end.
    If login is required then you can send them via:

    https://generatepress.com/contact/

    Please add the URL for this post

    #576034
    Andrei

    I’ve sent an email.
    Thanks

    For sticky navigation how I can make the button smaller, because now, isn’t so nice.

    Check here
    https://cl.ly/rZxD/download/Screen%20Shot%202018-05-15%20at%2015.35.59.png

    #576043
    David
    Staff
    Customer Support

    Hi Andrei, i will take a look when we get a minute. The simplest way to reduce the button height would be to adjust the Menu item height in Customiser > Layout > Sticky Navigation

    #576045
    Andrei

    I did that, but the logo will be affected and it will not be clear enough.

    So the best option at this moment is to have 65px height but the button background color to be around 20-30px…
    I will wait, isn’t urgent.

    #576052
    David
    Staff
    Customer Support

    Hi Andrei, if you want to style the sticky one differently then you can use the same code above and include the .navigation-stick selector. To change he height of the button, then you will need to use the line-height property.

    #576203
    Andrei

    I can’t make it work.
    Maybe you can take a look.

    #576211
    David
    Staff
    Customer Support

    Hi Andrei,

    can you try the following – comment out (or remove and put somewhere safe) these CSS rules:

    li#menu-item-190 {
        float: right;
        margin-right: 30px;
    	border-radius: 30px !important;
        color: #fff !important;
    	background-color: rgb(0, 156, 234) !important;
    }
    li#menu-item-190:hover {
        border-radius: 30px;
        color: #fff;
    	background-color: rgb(0, 156, 234);
    }
    
    .main-navigation .visible-cta .navigation-stick a {
    line-height: 35px;
    }

    And try this instead:

    .main-navigation .visible-cta {
        float: right;
        margin-right: 30px;
    }
    .main-navigation .visible-cta a {
        border-radius: 30px;
        color: #fff !important;
        background-color: rgb(0, 136, 204);
    }
    .main-navigation .visible-cta a:hover {
        background-color: rgb(0, 156, 234) !important;
    }
    .sticky-enabled .main-navigation.is_stuck .visible-cta  a {
        line-height: 35px;
        position: relative;
        transform: translatey(50%);
    }
    #576257
    Andrei

    It’s working.
    Thanks a lot.

    Also, I need to make this header from the main page – https://www.gahumanresources.co.uk/

    Can you guide on the process?

    Thanks

    #576263
    Andrei

    Another problem that I am trying to figure out is why the logo is so small and how I can make it bigger and the menu, should have some padding-left because now is too close to the logo.

    #576336
    David
    Staff
    Customer Support

    Hi Andrei,

    the Navigation Logo height is defined by the navigation bar height. An alternative would be to set the navigation logo to Sticky only, add a Site logo in the site identity and set the navigation location to float right.

    #576340
    Andrei

    But when I do that, the logo will be above the menu…

    I did make some tweaks while I was waiting for your reply and now seems better.

    Can you guide me through

    I need to make this header from the main page – https://www.gahumanresources.co.uk/

    #576346
    David
    Staff
    Customer Support

    Hi Andrei, its looking good, to match that header you need to:

    1. Set the header and navigation to full width in the customiser.
    2. Use the GP Page Headers as you have done on the Contact, page if you don’t add the background image it will use the pages featured image.
    3. Set the Page header to full width. And then as per the Contact page change your navigation colors to transparent.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.