Add button below main menu

  • Author
    Posts
  • #163690

    thibsin
    Member

    Hi,

    Does anyone know how to add a button below the main menu ?

    In order to let my customers book a photo shooting with me, I need to redirect them to another website. Is it possible to had a “Book Now” button somewhere on the top right conner of the pages ?

    Thank you very much in advance for your answers.

    Kind regards,
    Thibaud

    The blog I need help with is thibaudtellier.com.

    #163697

    tarasdashkevych
    Theme Author

    Hello Thibaud,

    The menu items in the header section are added using the Site Menu functionality.

    Unfortunately, it’s currently not possible to display a custom link below the main menu.

    However, you can create a call to action menu button in your primary menu, which will be opening a new website on a click.

    Here is a guide on how to open a menu item in a new tab (make sure Link Target is checked on your site): https://wordpress.com/support/advanced-menu-settings/

    Here is a guide on how to add a custom link to your menu item (use Custom Link option): https://wordpress.com/support/menus/#add-menu-items

    I can help you with making your new menu item stand out from the rest of menu items using a custom CSS. Something similar, what is done in this article.

    Please add your new menu link to the main menu, and let me know when is done, so I can inspect your page and provide a custom CSS for you.

    Kind regards,
    Taras

    #163700

    thibsin
    Member

    Hello Taras,

    Thank you very much for you quick and very useful answer.

    As suggested, I have add a custom link in my menu and applied a custom CSS like button effect shown in the article. This works perfectly.

    However, I wanted to change the text colour to white in the button so I added this piece of code to the one you supplied in your article :

    color: #ffffff;

    Unfortunately it doesn’t work. Here the full CSS for the button :

    /* Button effect on "Réserver" menu item in the main menu */
    .menu-link-rounded a {
      background-color: #1b6fc2;
      padding: 0 20px;
      border-radius: 30px;
      text-shadow: none;
      font-weight: bold;
    	color: #ffffff;
    }

    Can you please help me again on this ?

    You can see the menu on my website.

    #163703

    tarasdashkevych
    Theme Author

    Thibaud,

    Since you are using a custom CSS on your site to change default links color to black, you need to use this CSS to override your current link styles:

    
    #primary-menu .menu-link-rounded a {
      background-color: #1b6fc2;
      padding: 0 20px;
      border-radius: 30px;
      text-shadow: none;
      font-weight: bold;
      color: #ffffff;
    }
    

    Additionally, you can also add this custom CSS to your site to improve accessibility of your custom button when user hovers over the button:

    
    #primary-menu .menu-link-rounded a:hover {
      background-color: #000000;
    }
    
    #primary-menu .menu-link-rounded a:hover::before {
      display: none;
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #163709

    thibsin
    Member

    Hello Taras,

    Thank you very much for this, I love it. I have changed the colour and added a border when we hover it to make it a little bit bigger.

    #primary-menu .menu-link-rounded a:hover {
      background-color: #40C24A;
    	padding: 0 18px;
    	border-width: 1px;
    	border-color: #40C24A;
    	
    }
    
    #primary-menu .menu-link-rounded a:hover::before {
      display: none;
    }

    Viewed on a mobile device, the button has disappeared though. Is this normal ?

    #163715

    tarasdashkevych
    Theme Author

    Hi Thibaud,

    On mobile devices, your menu link is located in the mobile menu, the same way as other primary menu items. Currently, the “Réserver” menu link is located below the “Contact” menu link. See a screenshot: https://snipboard.io/tXFRdu.jpg

    Unfortunately, it’s not possible to take that menu item outside of the mobile menu.

    If you want to highlight your menu item in the mobile menu as well, you can use this custom CSS:

    
    /* highlight menu link in the mobile menu */
    .mobile-navigation .menu-link-rounded a {
      color: #1b6fc2;
    }
    
    .mobile-navigation .menu-link-rounded a:hover {
      color: #40C24A;
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #163717

    thibsin
    Member

    Thank very much Taras, this is perfect !!

    You have been really helpful. I very much appreciate it ! :D

    Kind regards,
    Thibaud

    #163719

    tarasdashkevych
    Theme Author

    You are welcome, Thibaud! :)

    Feel free to open a new thread in this forum if you’ll have any other questions about the theme.

    Kind regards,
    Taras

The topic ‘Add button below main menu’ is closed to new replies.