[Resolved] Customizing Menu Button

Home Forums Support Customizing Menu Button

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #460820
    Anil

    Hi,

    I have added a button on my menu, but I am unable to resize it. It appears too large on the desktop and covers the entire width in the slideout menu on mobile. I tried using Custom CSS to edit the properties but wasn’t able to get the desired result. How do I fix the button?

    Thanks,

    Anil

    GeneratePress 2.0.1
    #460972
    Leo
    Staff
    Customer Support

    Hi there,

    Try using the same method of selector here: https://docs.generatepress.com/article/adding-buttons-navigation/

    And add this style:
    line-height: 20px;

    #461277
    Anil

    I tried adding the line height, but it isn’t working. Not sure what I am doing wrong here. Can you help?

    Regards,

    Anil

    #461316
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .main-navigation .main-nav ul li.quote-button a {
        line-height: 35px;
    }
    #462007
    Anil

    Nope, that didn’t work either

    #462015
    Leo
    Staff
    Customer Support
    #462078
    Anil

    Hey yeah. Guess I forgot to do a hard refresh of my page. Thanks a lot Leo & Tom

    #462415
    Leo
    Staff
    Customer Support
    #905858
    Nele

    Hi there,

    I’ve placed a button in my main menu. (website http://www.dshomecosult.be)

    but I have 4 questions:

    1: My logo (left) and my menu(right) aren’t on the same “height”, I’ve tried and change the height trough customization –> lay out –> menu –> main menu –> menu height BUT my button gets all big when I do this.

    code i used to make a button in my navigation:

    @media (min-width:769px) {
        .main-navigation .main-nav ul li.nav-button a {
    
    -webkit-border-radius: 5;
      -moz-border-radius: 5;
      border-radius: 5px;
      font-family: Montserrat;
      color: #ffffff;
      font-size: 15px;
      background: #cf203b;
      padding: 0px 5px 5px 5px;
      text-decoration: none;

    I’ve tried and change the header height, header padding and logo padding but I can’t get a solution where my button has a normal size AND my logo and menu are on te same size.

    2: I want the size between my menu items to be equal. I’ve found where to change the space inbetween them but with my button there always seems there is less space between the item next to the button and the button itself. Is there anyway to fix this?

    3: it seems my word ‘contact’ is a bit off center (horizontally) in the button.
    To fix this I tried a code but it only changed my button size again…

    4: I want to give it a hover effect…to start with I just wanted to change the colour of the button and i have found this code:

    .butn:hover {
      background: #fffff;
      text-decoration: none;
    }

    But it doesn’t work and i also would like the color of the text to change…

    Could you guys please help me out? What am I doing wrong?

    kind regards
    Nele

    #905861
    Leo
    Staff
    Customer Support

    Please open a new topic for your questions.

    Thanks!

    #929875
    aziz

    Hi Team ,

    I have used the code, but nothing happened, did I miss something ?
    I also added the class : nav-button


    @media
    (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    line-height: 35px; /*this number will likely need to be adjusted*/
    }
    }

    Thanks very much
    Aziz

    #929888
    Leo
    Staff
    Customer Support

    Can you link us to the site in question?

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