Add line of text below the menu on Apostrophe 2

  • Unknown's avatar
    sottevilleaufildutemps · Member ·

    Hello,
    With the “Apostrophe 2” theme, I would like to add a line of text under menu. This must be visible on the home page, but also on a page or an article when it is open.
    We have to put additional css, but I can’t find what to put…
    Can you help me ?
    Thank you !
    Laurent
    My blog : https://sottevilleaufildutemps.fr/

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

  • fstat · Staff ·

    Hi there,

    Το display a line of text below the menu, use the following CSS code.

    /* Add custom text below menu */
    .main-navigation::after {
    content: "Your line of text";
    display: block;
    text-align: center;
    font-size: 16px;
    padding-top: 10px;
    }

    Replace the “Your line of text” with the desired text you want to display beneath your menu. And adjust the font-size property value to your desired size.

    f you need further assistance or have other questions, feel free to ask!

  • Unknown's avatar
    sottevilleaufildutemps · Member ·

    Hello !
    Thanks for this code. It’s quite simple but I couldn’t find .main-navigation::after {content:
    It works fine, thanks ! But I paused the display because the project is not set up yet.
    Just a small additional precision: if I want to make 2 lines, how to make a line break in the middle of the text. I know <br> in html, but how is it in CSS?
    Thank you !
    Laurent

  • staff-zinnia · Staff ·

    Hi Laurent –

    It’s going to depend on where exactly you want the line break. Is it with in that red rectangle from the screen shot above?

    Additionally, we have some great material to help you learn CSS.

    WP
    CSS Basics
    in WordPress.com Support
    4 min read
    This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan. CSS, or Cascading Style Sheets, is a way to apply style rules to HTML content. This page will cover a few basics about CSS such as selectors and ordering. You can add custom CSS by going to Appearance → Additional CSS in
  • Unknown's avatar
    sottevilleaufildutemps · Member ·

    Yes, this insert will serve as news. Sometimes there will be 2 news. So the lines of text in the red frame in my screenshot will sometimes be 2.

  • Unknown's avatar
    helper-heroponriki · Member ·

    I’m happy to help you out! While this type of customization is a bit outside of our usual scope of support, I’d be happy to give you some suggestions to help you achieve what you’re looking for.

    I’m not sure if using CSS alone would be enough to accomplish your goal. To make the changes you want, you would likely need to have access to edit the theme files directly, which is possible with the Business Plan. This would also allow you to install helpful plugins that could improve your site and other features like automated backups, and more.

    However, if that’s not an option, another solution could be to add a Custom HTML Block for your site’s News section at the top of your right sidebar (shown in green below). You could use HTML to enter your text and add classes to style it in CSS. This way, you could make the text stand out by changing its color or style.

    I hope that helps! Let me know if you have any other questions or concerns.

  • Unknown's avatar
    sottevilleaufildutemps · Member ·

    Hello !
    Thanks for your response. However, I thought a very simple solution existed. I don’t know how to do what you are telling me, it seems quite complicated. Too bad, I’m going to put only one news at a time, it will be clearer.
    Thank you !
    Laurent

  • The topic ‘Add line of text below the menu on Apostrophe 2’ is closed to new replies.