Header menu tabs spacing

  • Hi,
    how can i add space between header menu tabs?
    how can i increase font size?
    Thanks.

    #nav-header.nav-container { background: transparent; z-index: 97;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .container { padding: 0 15px; text-align: center; }
#nav-header .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .nav-text { color: #fff; color: rgba(255,255,255,0.7); }

@media only screen and (min-width: 720px) {

	/* common */
	#nav-header .nav {  }
	#nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.7); }
	/* level 1 */
	#nav-header .nav > li { border-right: none; }
	#nav-header .nav > li > a:hover,
	#nav-header .nav > li:hover > a { background: rgba(0,0,0,0.1); }
	#nav-header .nav li > a:hover,
	#nav-header .nav li:hover > a,
	#nav-header .nav li.current_page_item > a,
	#nav-header .nav li.current-menu-item > a,
	#nav-header .nav li.current-menu-ancestor > a,
	#nav-header .nav li.current-post-parent > a { color: #fff; }
	/* level 2 & 3 */
	#nav-header .nav ul { background: #33363b url(img/opacity-10.png) repeat; }
	#nav-header .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
	#nav-header .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }

}
@media only screen and (max-width: 719px) {

	/* common */
	#nav-header.nav-container  { border-left: 0; border-right: 0; }
	#nav-header .container { padding: 0}
	#nav-header .nav { padding-bottom: 20px; }
	#nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); }
	/* level 1 */
	#nav-header .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
	#nav-header .nav li.current_page_item > a,
	#nav-header .nav li.current-menu-item > a,
	#nav-header .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }

}
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi agritux. Welcome to the Hueman forum. It would be easier to work up a solution if we could see the menu. Can you post a link to your site? Thanks.

    Thread Starter agritux

    (@agritux)

    Hi again. thanks for your reply.
    Sure i can post a link
    it is gelindamout.com
    thank you very much.

    Try adding the following css to a child theme style.css file or a plugin like TJ Custom CSS.

    /* increase space between menu items */
#nav-topbar .nav li {
    padding-right: 30px;
}
/* increase menu font size */
#nav-topbar .nav li a {
    font-size: 24px;
}

    Adjust the sizes as needed.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header menu tabs spacing’ is closed to new replies.