Navigation CSS Customization

  • vlogazul · Member ·

    Hello, I am using the Expound theme and I would like to know if there’s a snippet for the following requests.

    1. If you click on any category text on the navigation bar, lets says the “Liga Bancomer Mx” category text. You will see a blue square with a down arrow on that category. Is there a way to get rid of that arrow and only for the rectangle category link text to appear?

    2. If you visit the “El carton de Iracheta” category on the navigation bar and click on one of the cartoon posts you will see a gap between the title text and the cartoon image. I was wondering if you visit my most recent post you will see that the gap between the title text and the article is not much, is there a way for the cartoon posts to look the same as the article posts on the gap space?

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there, this will get rid of the little down arrow below the current menu items. 

    .navigation-main ul > .current_page_item a::after, .navigation-main ul > .current-menu-item a::after, .navigation-main ul > .current-post-ancestor a::after, .navigation-main ul > .current-menu-parent a::after, .navigation-main ul > .current-post-parent a::after {
    border-left: none;
    border-right: none;
}

    Give this a try for the cartoon posts. 

    .single .alignnone {
    margin-top: 0;
}
  • vlogazul · Member ·

    Both of those snippets work perfectly, thanks.

    Would there be a solution for the following?

    I recently added the wordpress follow button next to the search bar on the top right corner of the website using css. I noticed that before putting that follow button on that position, I was able to type on the search widget and also I was able to click on the facebook and twitter icons but after I put that button in there it seems that is blocking the search bar and the facebook and twitter buttons. I am only able to click on the youtube icon. Is there a solution for that?

  • thesacredpath · Member ·

    The width of the follow button widget was too long and as you suspected was covering the search and your social icons. Modify your follow button widget code like I have below. 

    #follow_button_widget-3 {
    margin-right: 0;
    max-width: 140px;
    position: absolute;
    right: 210px;
    top: 44px;
}
  • vlogazul · Member ·

    I replaced the snippet I had with the one you gave me and it works perfectly, thanks.

    Is there a snippet to decrease the blue gap space between the header of the site and the bar section of any computer. Basically for my website header to start adjacent to any tab on the computer? Would that affect the positioning of the follow button, search bar and social icons?

  • thesacredpath · Member ·

    See if this is what you are looking for. 

    #page {
    margin-top: 0;
}
  • vlogazul · Member ·

    Yes, that works perfect.

    I was wondering, by any chance would there be a snippet to have an excerpt with the title of the posts in the category section just below the featured post? basically instead of having the whole title of the post in those 4 category posts just to have an excerpt?

  • thesacredpath · Member ·

    Have you tried using the Read More tag in your posts? That should allow you to have excerpts on the categories pages and a read more link which would take them to the full post.

    There isn’t a way to create excerpts with CSS really.

  • The topic ‘Navigation CSS Customization’ is closed to new replies.