Advanced - Editing a Navbar button design

Advanced - Editing a NavBar button design

However your NavBar was created, you can modify the button design it uses. For a NavBar where all buttons are the same design, the very first button in the bar is used as the master button from which all the other buttons are copied. Therefore by modifying the first button design, you modify the design for the whole bar.

Editing inside

For some bars you can do some editing of the button design directly on the first button, using select inside. This allows you to select shapes inside the button group. See the information about the Selector Tool in the Object Handling chapter for details of select inside.

However you cannot do select inside editing, if either of the following options are turned on in the NavBar dialog.

Site navigation bar

Adjust button widths to labels

If either of these options are turned on and you attempt a select inside, you'll be prompted and given the option of opening the NavBar dialog so that you can turn off these options and then try again.

With the options off, you can use select inside and modify the shapes that make up your button using the usual drawing tools.

IMPORTANT: Remember that the first button in your bar is the master button for your bar (unless you have different start and end buttons – see below). So you must modify the first button. Then your changes to the first button are immediately applied to the other buttons in your bar. If you modify a button other than the master, the changes will not be applied and will be lost as soon as you modify your bar.

Ungrouping, editing and regrouping

If you want to do any significant editing of a button design, it's best to ungroup the components that make up the NavBar and then regroup them again afterwards.

To ungroup your bar, select the NavBar by clicking on it on the canvas and then do a normal ungroup operation ("Arrange" > "Ungroup" or "Ctrl + U"). Or click the Ungroup to edit graphics button at the bottom of the NavBar dialog.

Note: If your NavBar had the "Site navigation bar" option turned on, you'll need to turn that option back on again if required, after regrouping your modified bar.

Once your bar is ungrouped, it is no longer a navigation bar. You are left with a separate button group for each button state. Also, if the "All buttons the same width" option was turned on, ungrouping might change the button widths because this option is only effective while the buttons are part of a NavBar. Although you should only make the design changes to the master button(s), you'll normally want to leave all the other buttons on the page. They are used when you regroup your NavBar, to recover all your button labels, links, etc., so that you don't have to re-enter them again.

If you have a mouseover state, the 2 groups that make up the master button will be „soft grouped" so that they stay together when you drag them around the page. Separate them using "Arrange" > "Remove soft group" ("Ctrl + Alt + U"). You can then further ungroup each button state on the MouseOff and MouseOver layers ("Ctrl + U"), in order to work on their respective designs. See the "Creating your own Mouseover Buttons" section of the Getting Started chapter for information on how to make buttons.

Remember to regroup each of the button states and then put the soft group back to keep the two button states together once you're done editing. Do this by making sure both layers are turned on in the Page & Layer Gallery, select both button state groups and then "Arrange" > "Apply soft group". See the Object Handling chapter for more information on soft groups.

It's a good idea to test your button works as expected by previewing your page, before re-assembling the bar. To put your bar back together, select the modified button and choose "Arrange" > "Create Navigation Bar".