[Resolved] How can I achieve header like https://themify.me/demo/themes/ultra-accountant/

Home Forums Support [Resolved] How can I achieve header like https://themify.me/demo/themes/ultra-accountant/

Home Forums Support How can I achieve header like https://themify.me/demo/themes/ultra-accountant/

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #592168
    Mohit

    Hi guys, I like header of https://themify.me/demo/themes/ultra-accountant/ website. Also check how it looks when you scroll down.

    GeneratePress 2.1.2
    #592233
    David
    Staff
    Customer Support

    Hi there, you could try this:

    Within customiser
    1. Site Identity > Remove all identity and logo.
    2. Layout > Header. Change all padding to zero.
    3. Layout > Navigation. Set to Full width and inner to Contained. S et Location to Below Header. Add a navigation logo set to sticky and static.
    4. Layout > Sticky Navigation. Select this and the transition effect you want.
    5. Additional CSS add the following:

    .inside-navigation {
    	position: relative;
    	top: 30px;
    	background-color: #000;
    }

    change the #000 to match the Color set in the primary navigation.

    The telephone number and social icons can be added to the Top Bar Widget area. We can help with positioning once they are there if you need.

    The full hero image can be achieved using a GP Page Header set to full width with content and the necessary padding.

    #592240
    Mohit

    Thanks man!! your support is really great!!

    There’s a little problem; there’s less margin between logo and primary nav now. How could I add more margin between nav and logo? By the way I added dummy logo to test things out.

    https://planeteimmigration.com

    Also once I have more menu items in primary menu, how can i make sure additional menu items that go on to the next line float to right.

    Thanks again!!

    #592243
    David
    Staff
    Customer Support

    You can Align the Navigation Right in the Customiser > Layout > Navigation.
    Create a Menu in Dashboard > Appearance > Menus (or in the Customsier > Menus) and assign this to the Primary Navigation. The order the items are placed will be Top menu item = Left item in navigation.

    #592245
    Mohit

    Cool.. I think you missed out on a small thing in the header I like.. When you scroll down you would notice part above “inside-navigation” disappears in ultra demo.. Thanks

    #592246
    David
    Staff
    Customer Support

    Try adding this CSS:

    .sticky-enabled .main-navigation.is_stuck {
        margin-top: -30px !important;
    }
    #592252
    Mohit

    Thanks for answering all the questions.

    If you don’t mind me asking one more regarding that demo website please answer:

    In the primary nav of demo site you’d see “Book Appointment” menu item which has background and little border around it. When I try to add background it extends entire height of the “inside-navigation”. I want some margin on top and bottom not the entire height after I add background and border to a menu item.

    #592256
    David
    Staff
    Customer Support
    #592258
    Mohit

    Ok, I will try it.. I think as a side affect of all the customization, mobile menu items are visible.

    #592260
    Mohit

    Dang my bad. Although GP by default adds pages to primary nav enough though you have created a menu BUT it doesn’t add that to slideout nav lo man this is confusing.. Sorry for the trouble!!

    #592261
    David
    Staff
    Customer Support

    If you want to limit the customisation to Desktop then we can wrap the CSS rules in a media query like so:

    @media (min-width: 768px) {
        .inside-navigation {
        	position: relative;
        	top: 30px;
        	background-color: #000;
        }
        .sticky-enabled .main-navigation.is_stuck {
            margin-top: -30px !important;
        }
    }
    #592268
    Mohit

    I want header customization for both desktop and tablet. I understand it’d require different min-width.

    Need another css tweak from you. If you’d notice demo’s mobile menu slideout animation, mobile menu slideout part has darker color and overlay over other non mobile menu nav area.

    If I may sir, how can I do this?

    Thanks,

    Saurabh

    #592277
    David
    Staff
    Customer Support

    Customiser > Colors > Slide Out Navigation allows you to set the navigation colors. To change the Overlay color requires this CSS:

    .slideout-overlay {
        background-color: rgba(255,255,255,0.5);
    }
    #593193
    Mohit

    Thanks slide overlay worked. Regarding demo’s call to action “book appointment” button in navbar, I tried to do the same thing using the docs link you provided but background of “privacy policy” button in my case is still full height on navbar.

    https://planeteimmigration.com

    #593197
    David
    Staff
    Customer Support

    Hi, add this into your CSS rule for the nav button:

    line-height: 2.5em;

    Adjust the 2.5em accordingly.

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