Customizing the look of the nav menu buttons

kbpix

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.

Allen

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.

kbpix

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' Mike

@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.

kbpix

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' Mike

@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.

kbpix

Can you please paste a sample CSS code to customize smugmug's standard nav menu and buttons?

Hikin' Mike

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

kbpix

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/

Hikin' Mike

@kbpix said:
Where do I place the CSS code? This is my website: https://www.kushalbose-pix.com/

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

kbpix

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