Adjusting Main Header Height and Changing Menu Text's Selected Page Color

  • Author
    Posts
  • #163273

    davidohanawordify
    Member
    Original poster

    Hi Taras,

    Many thanks for your help on this theme!

    I’m looking to change the main navigation menu’s height globally. I recently added my logo and tried changing the size in px (including the recommended 350px by 150px) a number of times to see if the main menu’s height would change with each logo iteration. Despite the changes, I can’t find a way to decrease the main menu’s height.

    I looked through previous forums looking for the answer to my question and I found this custom CSS and tried it out;

    `.page-id-100 .singular-page-header {
    max-height: 250px;
    margin-bottom: 0;
    }

    .page-id-100 #primary-header {
    max-height: 250px;
    } ‘

    …but it didn’t solve the issue. For context, I’m working with Elementor as a plugin while using Venture’s main menu nav.
    I’d like to decrease the menu’s height globally so that it accommodates the logo while not being “intrusively-fatty” while scrolling down.
    —————-

    Additionally, I’d like to change the highlighted page’s color in the main menu to ‘#73dabb’.

    So for example, if a visitor is on the page ‘For Advertisors’ the main navigation menu’s text will be ‘For Advertisers’ in ‘#73dabb’.

    My website can be seen at: https://appstock583628148.wpcomstaging.com/
    I hope you can view it, I’m unsure how to make it visible to you without making the site live.

    Thanks for your help!

    The blog I need help with is: appstock583628148.wpcomstaging.com

    #163287

    tarasdashkevych
    Theme Author

    Hello,

    “I hope you can view it, I’m unsure how to make it visible to you without making the site live.”
    – Unfortunately, I cannot view your site unless it’s public. So, I hope I will be able to help without inspecting your site :)

    “I’d like to decrease the menu’s height globally …”
    – By default, the main menu has top and bottom paddings. See example: https://snipboard.io/0HefJY.jpg

    You can modify these paddings to reduce the height of the site header:

    
    .site-header {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    

    Also, you can set custom paddings for the site header during a scroll:

    
    @media (min-width: 768px) {
      .site-header.scroll-header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
    }
    

    “Additionally, I’d like to change the highlighted page’s color in the main menu to …”
    – To set custom color for the current menu item, please use this CSS:

    
    .main-navigation ul .current-menu-item > a {
      color: #73dabb;
    }
    

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

    Kind regards,
    Taras

    #163293

    davidohanawordify
    Member
    Original poster

    Hi Taras,

    I looked through the CSS source code of Venture’s theme and messed around with a few options, namely…

    
    /* Adjusting header size */
    .site-header {
      padding-top: 1em;
      padding-bottom: 1em;
    }
    
    .site-header{
    	max-height: 5em;
    	width: auto;
    	padding-top: 1em;
    }
    
    @media (min-width: 768px) {
      .site-header.scroll-header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
    }
    
    
    
    ...until I got my desired result. I don't have a strong developer background but this combination works! I hope my "rough-and-tumble" method doesn't open more problems than it solves, but many thanks for the support! 
    
    
    “Additionally, I’d like to change the highlighted page’s color in the main menu to …”
    
    
    
    
    .main-navigation ul .current-menu-item > a {
      color: #73dabb;
    }
    
    
    
    This code works like a charm. I hope my 'inspect element' skills aren't showing too hard right now. 
    
    Thanks for all your help!
    
    - David Ohana
    
    
    
    #163418

    tarasdashkevych
    Theme Author

    Hello David,
    I apologize for delayed response.

    Feel free to open a new thread in this forum if you’ll have any other questions regarding the theme. I will be happy to help!

    Kind regards,
    Taras

The topic ‘Adjusting Main Header Height and Changing Menu Text's Selected Page Color’ is closed to new replies.