Every website must include navigational menus or bars. They aid users in navigating the pages and discovering the necessary information. However, not every website design will work well with the navigation bar in its default position. We’ll show you how to relocate the navigation bar to the left with HTML, WordPress, and Elementor in this article.
Moving the HTML Navigation Bar to the Left
In HTML, you must use CSS to relocate the navigation bar to the left. Cascading Style Sheets, or CSS for short, is a language used to style web pages. Here is an illustration of how to use CSS to relocate the navigation bar to the left in HTML:
”’
style>.navigation
float: left;
“`
The navigation bar has been shifted to the left in the code above using the “float” property. The HTML navigation element has a class named “.navigation” for it. Your class name can be used in its stead. Moving the HTML Navigation Bar Down In HTML, you can use the “position” property to move the menu bar downward. Here’s an illustration:
”’
style>
.navigation
position: relative;
top:
50px;
The location of the navigation bar has been set in the code above using the “position” property. The navigation bar is lowered from its initial position by using the “top” property. The value of “top” can be changed to suit your requirements. Changing the Menu Bar’s Size in WordPress By modifying the CSS of your theme, you can alter the menu bar’s size if you’re using WordPress. This is how you do it:
1. Select Customize from the Appearance menu
2. Select Additional CSS
3. Include the subsequent code:
padding: 20px;
”’
.site-header.main-navigation;
”’
WordPress Navigation Menu Design
CSS classes can be used in WordPress to style a navigation menu. Here’s an illustration: Color: #333; font-size: 16px; font-weight: strong;
.menu-item;
”’
The “.menu-item” class is used in the code above to decorate the navigation menu. More CSS properties can be added to further tailor the menu to your preferences. Elementor’s Menu Bar Can Be Changed By altering the header template, you can modify the menu bar if you’re using Elementor. This is how you do it:
1. Select Header from Templates > Theme Builder. 2. Modify the template for the header 3. Move the “Nav Menu” widget into position. 4. Modify the widget’s settings You can select the menu to display, the layout, and the style in the Nav Menu widget options. The menu bar can be further customized by including custom CSS.
In conclusion, using CSS makes it possible to style the navigation menu, move the menu bar to the left or down, and alter its size. You may alter your navigation bar to match your website design whether you’re using HTML, WordPress, or Elementor.