Menu and site title alignment

Home Forums Ample Free Menu and site title alignment

This topic contains 10 replies, has 4 voices, and was last updated by  ashishsthanp 2 months, 4 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1320338

    wordpressguide
    Participant

    Since the home page menu works differently from the other pages, I am having a hard time finding a way to horizontally align the text-bottom of the site title with the text-bottom of the menu items that will work across all pages.

    The site is here. https://raisereadykids.com

    Can you please help with that?

    #1320540

    Nilan
    Moderator

    Hi wordoressguide,

    Seems like you’ve added custom CSS to your index. Your CSS code for h1 is as follow:

    h1 {
        font-size: 44px;
        line-height: 57px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 18px;
    }

    Please remove font-size: 44px; and margin-bottom: 18px; from your above CSS.

    Hope this will resolve your issue. If there is anything else you need, please let us know.

    Regards,
    ThemeGrill Support

    #1320643

    wordpressguide
    Participant

    Thank you, that did it. We were using H1 for something else, but we’re not doing that anymore except in one instance, which I was able to style manually.

    I do have another question. The header navigation menu item for the current page is slightly raised above the other menu items. I’d rather have the current page menu item align with the others, except upon hover. How do I change that?

    Also, we want a copy of the header menu in the footer, centered across the page. We won’t be using any other widgets. I created the horizontal menu using the HTML widget, but how do I get it to center across the 4-widget area instead of wrapping to additional lines inside one widget area?

    #1320741

    ashishsthanp
    Moderator

    @wordpressguide
    The navigation design issue might have caused by the CSS code you’ve added in Additional CSS.
    Please check your code and fix accordingly or revert back the code related to navigation on you Additional CSS box.

    And add the following CSS for footer menu :

    .footer-box.tg-one-fourth {
      width: 100%;
    }
    
    .footer-box.tg-one-fourth .main-navigation {
      float: none;
    }
    #1320870

    wordpressguide
    Participant

    Doh! I should’ve seen the width change – thank you! Am still having trouble with the centering, however. Float:none gives me left-aligned, and text-align:center has no effect.

    I have identified the code that is creating the raised current item issue. Not sure I see how removing a border would create that (padding, maybe?), but I will take a closer look at it and see if I can figure it out myself. We like the raised effect on hover, so maybe we will just live with it.

    #1321262

    wordpressguide
    Participant

    There does not seem to be a .footer-box selector in the Ample free stylesheet – perhaps you were thinking of a different theme?

    #1321361

    ashishsthanp
    Moderator

    @wordpressguide

    There does not seem to have the menu on footer now.

    #1321369

    wordpressguide
    Participant

    I put it back now. I switched from the custom HTML widget to the custom menu widget.

    #1321693

    prabha
    Moderator

    Hello wordpressguide,

    Please use the following code and see if it works for you.

    .footer-widgets-area .tg-one-fourth {
    	float: none;
    	margin: 0 auto;
    }
    .footer-widgets-area .tg-one-fourth ul {
    	margin-left: 0;
    	text-align: center;
    }

    Thanks!

    #1321798

    wordpressguide
    Participant

    That does center the menu, but doesn’t make it horizontal. We have contacted you directly about doing the customizations for us.

    #1321854

    ashishsthanp
    Moderator

    Hello, @wordpressguide

    Please replace above code with:

    
    .footer-widgets-area .tg-one-fourth {
      float: none;
      margin: 0 auto;
      width: 100%;
    }
    .footer-widgets-area .tg-one-fourth ul {
      margin-left: 0;
    }
    .footer-widgets-area .tg-one-fourth ul li {
      float: left;
    }
    .footer-widgets-area .tg-one-fourth ul li a {
      font-size: 15px;
      font-family: Lato, Helvetica, Arial, sans-serif;
      margin: 0 20px;
    }
    

    Regards,
    ThemeGrill Support Team.

    • This reply was modified 2 months, 4 weeks ago by  ashishsthanp.
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.