Tabbed Nav Bar?

Armadillo · February 3, 2016

I'd like a have a tabbed nav menu, where the active tab has the background color of the page and the links look like tabs (preferably with nice rounded corners).
Havnt found anything were anyone has done that.
I could code that myself in an HTML & CSS block but it dosnt respond well to mobile devices. So I'd like to use the SM navmenu block instead (it's mobile friendly) and bend it to my will.

Has anyone created a tabbed nav menu using the standard navmenu block?

Lille Ulven · February 3, 2016

Hi.

To get your active entry in your menu colored with the background color of the page you can use this CSS (add a CSS-block to "Entire Site"):

.sm-page-widget-nav-activepage > a {
  background-color: rgb(82,100,132) !important; /*you would have to replace my 82,100,132 with your color values, or use #color-code instead of the rgb */
}

For your other ideas: it would help if you would supply a link to your site in your signature, then it would be easier for those who want to help you out to figure out what's not working like you want it too.

Good luck

Lille Ulven

Armadillo · February 3, 2016

Tabbed navigation bar!
OK! This was simpler than I thought!
I used a standard SM nav menu with no sub menus or separators, with mobile collapse turned on. Then I edited the theme CSS. The CSS does not apply to devices smaller than an iPad.
The menu bar has tabs with rounded corners, the active tab has page background color and highlight text. Tested on Safari, Chrome, Firefox, iPad, Samsung GS5.
A screen cap of the result is attached.

In the nav menu dimensions tool (the small triangle icon), set Bottom Margin to zero.
Here is the CSS. Any improvements are welcome...

Edit Theme -> Advanced -> Custom CSS...

@media screen and (min-width: 768px) {
.sm-page-widget-nav-activepage {background-color: #121212; !important;}
.sm-page-widget-nav-activepage > a {color: lime !important;} 
.sm-page-widget-nav-toplink {
  			padding: 7px !important;
  			margin-right: 0px !important;
  			border-top: 1px solid silver !important;
  			border-right: 1px solid silver !important;
  			border-left: 1px solid silver !important;
  			border-radius: 5px 5px 0 0;
			} 
}

BigRed · February 7, 2016

Armadillo wrote: »
OK! This was simpler than I thought!
I used a standard SM nav menu with no sub menus or separators, with mobile collapse turned on. Then I edited the theme CSS. The CSS does not apply to devices smaller than an iPad.
The menu bar has tabs with rounded corners, the active tab has page background color and highlight text. Tested on Safari, Chrome, Firefox, iPad, Samsung GS5.
A screen cap of the result is attached.

In the nav menu dimensions tool (the small triangle icon), set Bottom Margin to zero.
Here is the CSS. Any improvements are welcome...

Edit Theme -> Advanced -> Custom CSS...
@media screen and (min-width: 768px) {
.sm-page-widget-nav-activepage {background-color: #121212; !important;}
.sm-page-widget-nav-activepage > a {color: lime !important;} 
.sm-page-widget-nav-toplink {
              padding: 7px !important;
              margin-right: 0px !important;
              border-top: 1px solid silver !important;
              border-right: 1px solid silver !important;
              border-left: 1px solid silver !important;
              border-radius: 5px 5px 0 0;
            } 
}

Thanks for sharing your solution on this. I've been meaning to do something to reduce the horizontal space consumed by my menu, and this worked nicely. Just one other little tip that might help others: Even with my nav menu Bottom Margin set to zero, there still was some space below it -- which turned out to be caused by my Logo block dimensions Bottom Margin not also being set to zero.

Tabbed Nav Bar?

Comments