There are many website layouts to be found online. They are convenient to use when there is no time to write all the code from scratch. It is much easier to edit an existing template by changing its design. So, to draw your own site menu, you need to perform several steps.
Instructions
Step 1
As an example, the work in the ucoz system is considered. The design of various elements of a site is often specified using a style sheet (CSS). To access it, log into the control panel using an administrator account. On the main page of the panel, select the "Design Management" section.
Step 2
In the expanded list of editable pages, select Style Sheet (CSS) from the General Templates category. Look at the information written in the lines related to the general design (General Style block) and specifically to the menu (blocks with the word Menus in their names). You need to find out what parameters are set for the menu bar: width, height, background of the panel and buttons, images, and so on.
Step 3
If the parameters do not suit you, replace them with the ones you need and save the template. After that, you can already start the graphics editor and, using the information obtained, draw your own buttons. Save them and return to the site. In the "Tools" menu, select the "File Manager" item or click the link of the same name located under the block with the code.
Step 4
Upload new buttons to the site (directional arrows or other graphic elements that you will use in the menu). Write down the value for the buttons in the code (for example, background: url ('https:// link to the image from the file manager') no-repeat XXpx XXpx), set the parameters for alignment, position on the page. Write down the font style and size for the menu sections (font-family and font-size) and make any other changes you need.
Step 5
Click on the "Save" button, wait for the notification that the template has been successfully saved and open the site page to evaluate the result of the work done. If you are not satisfied with something, you can undo your actions in the CSS editing window using the left arrow button on the toolbar.
