Find the code for adding Menu to Header

  • housetop

    (@housetop)


    6 years ago

    Hello,

    A couple of years ago I asked a web designer to style the header for https://www.wijngaardsinstitute.com, which uses the Make theme.

    Now I want to “copy-paste” the same header style to a few other affiliated websites, all of which are also using the same Make theme.

    However, I cannot find where the designer saved the code for styling the header, and I cannot get hold of them anymore.

    All I can find in style.css that seems relevant is the code below. I tried copy-pasting that code into the style.css of the other websites, but it does not appear to do anything.

    .site-navigation ul, 
.site-navigation li{
	text-align:center !important;
}

.header-bar{
	display:none;
}

.site-description{
	font-size:.9rem;
}

.site-navigation .menu{
	border:none !important;
}

.site-header-main{
	padding: 1rem 0 2.2rem;
}

    I’ve also checked whether any code has been saved in the Customizer or the Code snippet, but no luck.

    All I want is to have some simple code to have a streamlined top bar showing, in order, Logo + Menu + Search symbol (the latter is currently not there yet but I want to find a way of adding it).

    Any suggestions please?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello @housetop,

    Can you please deactivate the cache plugin for some time? I am not able to find out the css path.

    Thread Starter housetop

    (@housetop)

    Hi @anoopranawat, thanks for this. I’ve now deactivated the cache plugin.

    Hello,

    Here is complete css :

    /*---------------------------------------------------------
 Header layout 3 (_scaffolding.scss)
-------------------------------------------------------- */

.header-layout-3 .site-navigation {
	float: left;
	width: 100%;
	max-width: 100%;
	text-align: left;
}

.header-layout-3 .site-navigation .menu {
	border-top: 1px solid #eaecee;
	border-bottom: 1px solid #eaecee;
}

.header-layout-3 .site-navigation .nav-menu {
	margin-bottom: 0;
}

.header-layout-3 .search-form {
	font-size: 13px;
	font-size: 1.3rem;
}

@media screen and (min-width: 800px) {
	.header-layout-3 .search-form {
		float: right;
	}

	.branding-right .header-layout-3 .search-form {
		float: left;
	}
}

.header-layout-3 .search-form input {
	width: 100%;
}

@media screen and (min-width: 800px) {
	.header-layout-3 .search-form input {
		width: auto;
	}
}

.header-layout-3 .search-submit {
	display: none;
}

/*---------------------------------------------------------
 Navigation (_scaffolding.scss)
-------------------------------------------------------- */

.site-navigation {
	margin-bottom: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media screen and (min-width: 800px) {
	.site-navigation {
		float: right;
		max-width: 50%;
	}

	.branding-right .header-layout-1 .site-navigation {
		float: left;
		text-align: left;
	}

	.branding-right .header-layout-3 .site-navigation {
		float: left;
		text-align: right;
	}
}

.site-navigation .menu,
.site-navigation .nav-menu {
	padding-left: 0;
}

.site-navigation .menu ul,
.site-navigation .menu ol,
.site-navigation .nav-menu ul,
.site-navigation .nav-menu ol {
	margin-left: 0;
}

.site-navigation .menu li,
.site-navigation .nav-menu li {
	text-align: left;
	list-style: none;
}

@media screen and (min-width: 800px) {
	.site-navigation .menu li,
	.site-navigation .nav-menu li {
		display: inline-block;
		position: relative;
	}
}

.site-navigation .menu li a,
.site-navigation .nav-menu li a {
	display: block;
	padding: 11px 0;
	padding: 1.1rem 0;
	border-bottom: 1px solid #171717;
	color: #171717;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.8;
	text-decoration: none;
}

@media screen and (min-width: 800px) {
	.site-navigation .menu li a,
	.site-navigation .nav-menu li a {
		padding: 11px 16px;
		padding: 1.1rem 1.6rem;
		border-bottom: 0;
		line-height: 1.4;
	}
}

.site-navigation .menu .sub-menu li:last-child a,
.site-navigation .nav-menu .sub-menu li:last-child a {
	border-bottom: none;
}

.site-navigation .menu .sub-menu,
.site-navigation .menu .children,
.site-navigation .nav-menu .sub-menu,
.site-navigation .nav-menu .children {
	padding: 0;
	text-align: left;
}

.site-navigation .menu .sub-menu li a,
.site-navigation .menu .children li a,
.site-navigation .nav-menu .sub-menu li a,
.site-navigation .nav-menu .children li a {
	padding-left: 16px;
	padding-left: 1.6rem;
}

.site-navigation .menu .sub-menu li a:before,
.site-navigation .menu .children li a:before,
.site-navigation .nav-menu .sub-menu li a:before,
.site-navigation .nav-menu .children li a:before {
	content: "\2013  ";
}

@media screen and (min-width: 800px) {
	.site-navigation .menu .sub-menu,
	.site-navigation .menu .children,
	.site-navigation .nav-menu .sub-menu,
	.site-navigation .nav-menu .children {
		overflow: hidden;
		position: absolute;
		z-index: -1;
		height: 0;
		background-color: #eaecee;
	}

	.site-navigation .menu .sub-menu li,
	.site-navigation .menu .children li,
	.site-navigation .nav-menu .sub-menu li,
	.site-navigation .nav-menu .children li {
		width: 100%;
	}

	.site-navigation .menu .sub-menu li:first-of-type a,
	.site-navigation .menu .children li:first-of-type a,
	.site-navigation .nav-menu .sub-menu li:first-of-type a,
	.site-navigation .nav-menu .children li:first-of-type a {
		padding: 15px 16px;
		padding: 1.5rem 1.6rem;
	}

	.site-navigation .menu .sub-menu a,
	.site-navigation .menu .children a,
	.site-navigation .nav-menu .sub-menu a,
	.site-navigation .nav-menu .children a {
		padding: 15px 16px;
		padding: 1.5rem 1.6rem;
		border-bottom: 1px solid #b9bcbf;
		font-size: 13px;
		font-size: 1.3rem;
	}

	.site-navigation .menu .sub-menu a:after,
	.site-navigation .menu .children a:after,
	.site-navigation .nav-menu .sub-menu a:after,
	.site-navigation .nav-menu .children a:after {
		content: none;
	}

	.site-navigation .menu .sub-menu .page_item_has_children a:after,
	.site-navigation .menu .sub-menu .menu-item-has-children a:after,
	.site-navigation .menu .children .page_item_has_children a:after,
	.site-navigation .menu .children .menu-item-has-children a:after,
	.site-navigation .nav-menu .sub-menu .page_item_has_children a:after,
	.site-navigation .nav-menu .sub-menu .menu-item-has-children a:after,
	.site-navigation .nav-menu .children .page_item_has_children a:after,
	.site-navigation .nav-menu .children .menu-item-has-children a:after {
		display: inline-block;
		float: right;
		position: relative;
		top: 4px;
		top: 0.4rem;
		font-family: "Font Awesome 5 Free";
		font-size: 10px;
		font-size: 1rem;
		font-weight: 900;
		text-decoration: none;
		content: "  \f054";
	}

	.site-navigation .menu .sub-menu .sub-menu li:not(.menu-item-has-children) a:after,
	.site-navigation .menu .sub-menu .sub-menu li:not(.page_item_has_children) a:after,
	.site-navigation .menu .sub-menu .children li:not(.menu-item-has-children) a:after,
	.site-navigation .menu .sub-menu .children li:not(.page_item_has_children) a:after,
	.site-navigation .menu .children .sub-menu li:not(.menu-item-has-children) a:after,
	.site-navigation .menu .children .sub-menu li:not(.page_item_has_children) a:after,
	.site-navigation .menu .children .children li:not(.menu-item-has-children) a:after,
	.site-navigation .menu .children .children li:not(.page_item_has_children) a:after,
	.site-navigation .nav-menu .sub-menu .sub-menu li:not(.menu-item-has-children) a:after,
	.site-navigation .nav-menu .sub-menu .sub-menu li:not(.page_item_has_children) a:after,
	.site-navigation .nav-menu .sub-menu .children li:not(.menu-item-has-children) a:after,
	.site-navigation .nav-menu .sub-menu .children li:not(.page_item_has_children) a:after,
	.site-navigation .nav-menu .children .sub-menu li:not(.menu-item-has-children) a:after,
	.site-navigation .nav-menu .children .sub-menu li:not(.page_item_has_children) a:after,
	.site-navigation .nav-menu .children .children li:not(.menu-item-has-children) a:after,
	.site-navigation .nav-menu .children .children li:not(.page_item_has_children) a:after {
		content: none;
	}

	.site-navigation .menu .sub-menu li,
	.site-navigation .menu .children li,
	.site-navigation .nav-menu .sub-menu li,
	.site-navigation .nav-menu .children li {
		padding-left: 0;
	}

	.site-navigation .menu .sub-menu li a:before,
	.site-navigation .menu .children li a:before,
	.site-navigation .nav-menu .sub-menu li a:before,
	.site-navigation .nav-menu .children li a:before {
		content: none;
	}

	.site-navigation .menu .sub-menu ul,
	.site-navigation .menu .children ul,
	.site-navigation .nav-menu .sub-menu ul,
	.site-navigation .nav-menu .children ul {
		top: 0;
		left: 100%;
	}
}

@media screen and (min-width: 800px) {
	.site-navigation .menu .current_page_item > a,
	.site-navigation .menu .current_page_ancestor > a,
	.site-navigation .menu .current-menu-item > a,
	.site-navigation .menu .current-menu-ancestor > a,
	.site-navigation .nav-menu .current_page_item > a,
	.site-navigation .nav-menu .current_page_ancestor > a,
	.site-navigation .nav-menu .current-menu-item > a,
	.site-navigation .nav-menu .current-menu-ancestor > a {
		font-weight: bold;
	}
}

.site-navigation .menu .current_page_item > a,
.site-navigation .menu .current-menu-item > a,
.site-navigation .nav-menu .current_page_item > a,
.site-navigation .nav-menu .current-menu-item > a {
	font-weight: bold;
}

@media screen and (min-width: 800px) {
	.site-navigation .page_item_has_children a:after,
	.site-navigation .menu-item-has-children a:after {
		display: inline-block;
		position: relative;
		top: -1px;
		padding-left: 2px;
		padding-left: 0.2rem;
		color: #b9bcbf;
		font-family: "Font Awesome 5 Free";
		font-size: 10px;
		font-size: 1rem;
		font-weight: 900;
		text-decoration: none;
		content: "  \f078";
	}

	.site-navigation ul.menu ul a,
	.site-navigation .menu ul ul a {
		min-width: 180px;
		max-width: 250px;
		margin: 0;
	}

	.site-navigation ul.menu ul a:hover,
	.site-navigation ul.menu ul a:focus,
	.site-navigation .menu ul ul a:hover,
	.site-navigation .menu ul ul a:focus {
		color: #fff;
		background-color: #3070d1;
	}

	.site-navigation ul.menu ul a:hover:after,
	.site-navigation ul.menu ul a:focus:after,
	.site-navigation .menu ul ul a:hover:after,
	.site-navigation .menu ul ul a:focus:after {
		color: #fff;
	}

	.site-navigation ul.menu li:hover > ul,
	.site-navigation .menu ul li:hover > ul,
	.site-navigation ul.menu .focus > ul,
	.site-navigation .menu .focus > ul {
		overflow: inherit;
		z-index: 99999;
		width: inherit;
		height: inherit;
	}
}

.site-navigation .desktop-menu .menu,
.site-navigation .desktop-menu .nav-menu {
	display: block;
	margin-bottom: 0;
	padding-left: 0;
}

.site-navigation .desktop-menu .menu ul,
.site-navigation .desktop-menu .menu ol,
.site-navigation .desktop-menu .nav-menu ul,
.site-navigation .desktop-menu .nav-menu ol {
	margin-left: 0;
}

.site-navigation .desktop-menu .menu li,
.site-navigation .desktop-menu .nav-menu li {
	display: inline-block;
	position: relative;
}

.site-navigation .desktop-menu .menu li a,
.site-navigation .desktop-menu .nav-menu li a {
	padding: 11px 16px;
	padding: 1.1rem 1.6rem;
	border-bottom: 0;
	line-height: 1.4;
}

.site-navigation .desktop-menu .menu .sub-menu,
.site-navigation .desktop-menu .menu .children,
.site-navigation .desktop-menu .nav-menu .sub-menu,
.site-navigation .desktop-menu .nav-menu .children {
	overflow: hidden;
	position: absolute;
	z-index: -1;
	background-color: #eaecee;
}

.site-navigation .desktop-menu .menu .sub-menu li,
.site-navigation .desktop-menu .menu .children li,
.site-navigation .desktop-menu .nav-menu .sub-menu li,
.site-navigation .desktop-menu .nav-menu .children li {
	width: 100%;
}

.site-navigation .desktop-menu .menu .sub-menu li:first-of-type a,
.site-navigation .desktop-menu .menu .children li:first-of-type a,
.site-navigation .desktop-menu .nav-menu .sub-menu li:first-of-type a,
.site-navigation .desktop-menu .nav-menu .children li:first-of-type a {
	padding: 15px 16px;
	padding: 1.5rem 1.6rem;
}

.site-navigation .desktop-menu .menu .sub-menu a,
.site-navigation .desktop-menu .menu .children a,
.site-navigation .desktop-menu .nav-menu .sub-menu a,
.site-navigation .desktop-menu .nav-menu .children a {
	padding: 15px 16px;
	padding: 1.5rem 1.6rem;
	border-bottom: 1px solid #b9bcbf;
	font-size: 13px;
	font-size: 1.3rem;
}

.site-navigation .desktop-menu .menu .sub-menu a:after,
.site-navigation .desktop-menu .menu .children a:after,
.site-navigation .desktop-menu .nav-menu .sub-menu a:after,
.site-navigation .desktop-menu .nav-menu .children a:after {
	content: none;
}

.site-navigation .desktop-menu .menu .sub-menu .page_item_has_children a:after,
.site-navigation .desktop-menu .menu .sub-menu .menu-item-has-children a:after,
.site-navigation .desktop-menu .menu .children .page_item_has_children a:after,
.site-navigation .desktop-menu .menu .children .menu-item-has-children a:after,
.site-navigation .desktop-menu .nav-menu .sub-menu .page_item_has_children a:after,
.site-navigation .desktop-menu .nav-menu .sub-menu .menu-item-has-children a:after,
.site-navigation .desktop-menu .nav-menu .children .page_item_has_children a:after,
.site-navigation .desktop-menu .nav-menu .children .menu-item-has-children a:after {
	float: right;
	position: relative;
	top: 4px;
	top: 0.4rem;
	font-family: "Font Awesome 5 Free";
	font-size: 10px;
	font-size: 1rem;
	font-weight: 900;
	content: "  \f054";
}

.site-navigation .desktop-menu .menu .sub-menu .sub-menu li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .menu .sub-menu .sub-menu li:not(.page_item_has_children) a:after,
.site-navigation .desktop-menu .menu .sub-menu .children li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .menu .sub-menu .children li:not(.page_item_has_children) a:after,
.site-navigation .desktop-menu .menu .children .sub-menu li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .menu .children .sub-menu li:not(.page_item_has_children) a:after,
.site-navigation .desktop-menu .menu .children .children li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .menu .children .children li:not(.page_item_has_children) a:after,
.site-navigation .desktop-menu .nav-menu .sub-menu .sub-menu li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .nav-menu .sub-menu .sub-menu li:not(.page_item_has_children) a:after,
.site-navigation .desktop-menu .nav-menu .sub-menu .children li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .nav-menu .sub-menu .children li:not(.page_item_has_children) a:after,
.site-navigation .desktop-menu .nav-menu .children .sub-menu li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .nav-menu .children .sub-menu li:not(.page_item_has_children) a:after,
.site-navigation .desktop-menu .nav-menu .children .children li:not(.menu-item-has-children) a:after,
.site-navigation .desktop-menu .nav-menu .children .children li:not(.page_item_has_children) a:after {
	content: none;
}

.site-navigation .desktop-menu .menu .sub-menu li,
.site-navigation .desktop-menu .menu .children li,
.site-navigation .desktop-menu .nav-menu .sub-menu li,
.site-navigation .desktop-menu .nav-menu .children li {
	padding-left: 0;
}

.site-navigation .desktop-menu .menu .sub-menu li a:before,
.site-navigation .desktop-menu .menu .children li a:before,
.site-navigation .desktop-menu .nav-menu .sub-menu li a:before,
.site-navigation .desktop-menu .nav-menu .children li a:before {
	content: none;
}

.site-navigation .desktop-menu .menu .sub-menu ul,
.site-navigation .desktop-menu .menu .children ul,
.site-navigation .desktop-menu .nav-menu .sub-menu ul,
.site-navigation .desktop-menu .nav-menu .children ul {
	top: 0;
	left: 100%;
}

.site-navigation .desktop-menu .menu .current_page_item > a,
.site-navigation .desktop-menu .menu .current_page_ancestor > a,
.site-navigation .desktop-menu .menu .current-menu-item > a,
.site-navigation .desktop-menu .menu .current-menu-ancestor > a,
.site-navigation .desktop-menu .nav-menu .current_page_item > a,
.site-navigation .desktop-menu .nav-menu .current_page_ancestor > a,
.site-navigation .desktop-menu .nav-menu .current-menu-item > a,
.site-navigation .desktop-menu .nav-menu .current-menu-ancestor > a {
	font-weight: bold;
}

.site-navigation .desktop-menu .menu .current_page_item > a,
.site-navigation .desktop-menu .menu .current-menu-item > a,
.site-navigation .desktop-menu .nav-menu .current_page_item > a,
.site-navigation .desktop-menu .nav-menu .current-menu-item > a {
	font-weight: bold;
}

.site-navigation .desktop-menu .page_item_has_children a:after,
.site-navigation .desktop-menu .menu-item-has-children a:after {
	position: relative;
	top: -1px;
	padding-left: 2px;
	padding-left: 0.2rem;
	color: #b9bcbf;
	font-family: "Font Awesome 5 Free";
	font-size: 10px;
	font-size: 1rem;
	font-weight: 900;
	content: "  \f078";
}

.site-navigation .desktop-menu ul.menu ul a,
.site-navigation .desktop-menu .menu ul ul a {
	min-width: 180px;
	max-width: 250px;
	margin: 0;
}

.site-navigation .desktop-menu ul.menu ul a:hover,
.site-navigation .desktop-menu ul.menu ul a:focus,
.site-navigation .desktop-menu .menu ul ul a:hover,
.site-navigation .desktop-menu .menu ul ul a:focus {
	color: #fff;
	background-color: #3070d1;
}

.site-navigation .desktop-menu ul.menu ul a:hover:after,
.site-navigation .desktop-menu ul.menu ul a:focus:after,
.site-navigation .desktop-menu .menu ul ul a:hover:after,
.site-navigation .desktop-menu .menu ul ul a:focus:after {
	color: #fff;
}

.site-navigation .desktop-menu ul.menu li:hover > ul,
.site-navigation .desktop-menu .menu ul li:hover > ul,
.site-navigation .desktop-menu ul.menu .focus > ul,
.site-navigation .desktop-menu .menu .focus > ul {
	overflow: inherit;
	z-index: 99999;
	width: inherit;
	height: inherit;
}

.menu-toggle {
	margin: 22px 0 0;
	margin: 2.2rem 0 0;
	padding: 10px 14px;
	padding: 1rem 1.4rem;
	border: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	background-color: #171717;
	font-size: 13px;
	font-size: 1.3rem;
	text-align: left;
	cursor: pointer;
}

.menu-toggle:before {
	padding-right: 6px;
	padding-right: 0.6rem;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0c9";
}

.header-navigation .menu-toggle {
	margin-top: 0;
}

.menu-toggle,
.site-navigation.toggled .nav-menu,
.site-navigation.toggled .menu {
	display: block;
}

.site-navigation .menu {
	display: none;
}

@media screen and (min-width: 800px) {
	.site-navigation .menu {
		display: block;
	}
}

@media screen and (min-width: 800px) {
	.site-navigation ul {
		display: none;
	}
}

@media screen and (min-width: 800px) {
	.menu-toggle {
		display: none;
	}

	.site-navigation ul {
		display: block;
	}
}
    Thread Starter housetop

    (@housetop)

    I’m speechless… Thank you so much! Where did you find all that code? Where was it hiding?

    A final newbie question: I’m trying to copy/paste it on a sister website to see if it works, but the code checker gives me an error every time the code shows the characters

    “>”

    I quickly googled it, and it says those characters are HTML for the “>” symbol. Should I replaced them with that symbol?

    Here’s a snippet of code affected, to give you an idea:

    .site-navigation .desktop-menu .menu .current_page_item > a,
.site-navigation .desktop-menu .menu .current_page_ancestor > a,
.site-navigation .desktop-menu .menu .current-menu-item > a,
.site-navigation .desktop-menu .menu .current-menu-ancestor > a,
.site-navigation .desktop-menu .nav-menu .current_page_item > a,
.site-navigation .desktop-menu .nav-menu .current_page_ancestor > a,
.site-navigation .desktop-menu .nav-menu .current-menu-item > a,
.site-navigation .desktop-menu .nav-menu .current-menu-ancestor > a {
	font-weight: bold;
}

    Hello,

    Please first copy and paste this code in a notepad and then add in your theme style.css file. Its better to add this code with the help of FTP.

    Thread Starter housetop

    (@housetop)

    I see what you mean. Thank you very much again!

    Thread Starter housetop

    (@housetop)

    Hi @anoopranawat, where did you find all the coding about the header please? I’d like to know where to look for it in the future.
    And if you can, I’d be grateful for a quick tip on how to apply that code to another website using the same Make theme.
    Thanks!

    • This reply was modified 5 years, 12 months ago by housetop.

    Hello @housetop,

    I found this code under style.css file of your theme ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Find the code for adding Menu to Header’ is closed to new replies.