Customizing the look of the nav menu buttons

kbpixkbpix Beginner grinnerRegistered Users Posts: 6 Big grins
Hello,
I'd appreciate if you could send me the CSS and HTML code for customizing the smugmug provided menu nav and button to look like the navigation buttons on my website (all pages): www.kushalbose-pix.com. Also, I need a sublink from the portfolio nav link. Also, please let me know where (header, body, footer, theme) should I insert the code.
Tagged:

Comments

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,940 Major grins
    edited May 28, 2021

    No need to create a menu using html anymore as Smug has a widget to replace to old method.

    To get the menu on all pages your add it to your header, in customize highlight "entire site" on the right flyout.
    Under "Add Content Blocks" click "NAVIGATION" and drag a Menu widget out to page and place it where you want.

    Click the little wrench on it and put in all your info.
    For sublinks drag them sightly to the right to indent.

    After installed you can use CSS to modify it.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • kbpixkbpix Beginner grinner Registered Users Posts: 6 Big grins
    edited May 28, 2021
    I know the part you have explained above. But I need the CSS code to change the appearance of those nav menu or buttons once I have added via the widget. I want to have blue highlights, thinner buttons, change text font and color and so on. Please check my page www.kushalbose-pix.com. I was told by smugmug heroes in an email that it can be done; if I post here, someone will send me the code. Your last sentence says CSS. I need that CSS code if you can help provide to reformat the buttons.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins

    @kbpix said:
    I know the part you have explained above. But I need the CSS code to change the appearance of those nav menu or buttons once I have added via the widget. I want to have blue highlights, thinner buttons, change text font and color and so on. Please check my page www.kushalbose-pix.com. I was told by smugmug heroes in an email that it can be done; if I post here, someone will send me the code. Your last sentence says CSS. I need that CSS code if you can help provide to reformat the buttons.

    Not sure I understand what "highlights" is? Is it a border or gradient? Do you have an example.

    You navigation "buttons" are already thin, so I don't think you're going to get them thinner, unless I'm not understanding that too.

    What specific font do you want to change?

    @Allen told you how to create sub menus for your Portfolio link.

  • kbpixkbpix Beginner grinner Registered Users Posts: 6 Big grins
    I have not used the smugmug provided content blocks to add those navigation buttons. Because I don't know how to customize them after adding the content block to change the look of those buttons (font, background color, spacing in between buttons, etc) added via smugmug provided content block. Through the smugmug provided nav menu option, I can customize just a few characteristics: layout style, alignment, text size. This is what I coded in CSS to create my own nav menu items where I have more ways to control the look of each menu item:
    #navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li {
    display: inline;
    }

    #navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
    }

    #navcontainer ul li a:hover {
    color: #fff;
    background-color: #369;
    }

    This is my HTML:
    <div id="navcontainer">
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="http://www.kushalbose-pix.com/Galleries">Portfolio</a></li>
    <li><a href="http://www.kushalbose-pix.com/Services">Services</a></li>
    <li><a href="https://www.kushalbose-pix.com/Resources">Resources</a></li>
    <li><a href="http://www.kushalbose-pix.com/Guestbook">Guestbook</a></li>
    <li><a href="https://www.kushalbose-pix.com/search">Search</a></li>
    <li><a href="https://www.kushalbose-pix.com/Kushals-contact-form1">Contact me</a></li>
    </ul>
    </div>
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins

    @kbpix said:
    This is what I coded in CSS to create my own nav menu items where I have more ways to control the look of each menu item:

    Using CSS you can control everything SmugMug offers. My site is FAR from stock.

  • kbpixkbpix Beginner grinner Registered Users Posts: 6 Big grins
    Can you please paste a sample CSS code to customize smugmug's standard nav menu and buttons?
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins
    edited May 29, 2021

    Without seeing your site and the fact you haven't answered my questions, I can only give you some general CSS that MAY work for your site.

    /** 
    * Nav Only Color, Font, Background, Padding
    ***************************************************/
    
    .sm-user-ui .sm-page-layout-region-header .sm-page-widget-nav a {
      font-family: 'Open Sans', Arial, sans-serif;
      font-size: .8125rem;
      font-weight: 600;
      color: blue;
      background: red;
      padding: 1rem;
    }
    

    If you are going to use other Google fonts, you need to look at this: https://www.aaronmphotography.com/Customizations/Fonts-Links/Google-Fonts

    If you are looking into using non-Google fonts, then you need to read this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

  • kbpixkbpix Beginner grinner Registered Users Posts: 6 Big grins

    Thank you for sharing the CSS code. I just added the nav menu buttons below my own customized buttons and trying to place the CSS code that you shared above.
    Where do I place the CSS code? This is my website: https://www.kushalbose-pix.com/

  • kbpixkbpix Beginner grinner Registered Users Posts: 6 Big grins

    Never mind. It needed to go in the header to see the effect of the CSS code.

Sign In or Register to comment.