タイトルがすべてを物語っています。メニュー バーから検索アイコンを削除し、単純に「検索」という単語に置き換えたいと考えています。
私style.cssはこのように見えます：
.site-header .search-field {
background-color: transparent;
/*background-image: url(images/search-icon.png);*/
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
z-index: 1000;
}
そして、どのファイルの他の場所にも、search-icon.png画像へのリンクを見つけることができません。
最後のスクリーンショットは、検索ボックスがドロップダウンしたことを示しています。メニューが許す限り右にずらして、他のメニュー項目と水平に並べて配置するにはどうすればよいですか?
nag-menu の生成に使用される CSS は次のとおりです。
/**
* 4.2 Navigation
* ----------------------------------------------------------------------------
*/
.main-navigation {
z-index: 1000;
clear: both;
margin: 0 auto;
/*max-width: 1920px;*/
max-width: 1080px;
min-height: 45px;
position: relative;
}
ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li a {
color: #3c3c3c;
display: block;
font-size: 15px;
/*line-height: 1;*/
/*padding: 15px 20px;*/
text-decoration: none;
}
.nav-menu li:hover > a,
.nav-menu li a:hover {
/*background-color: #220e10;*/
/*background-color: #333333;*/
color: #666;
}
.nav-menu .sub-menu,
.nav-menu .children {
/*background-color: #220e10;*/
background-color: #ffffff;
/*border: 2px solid #f7f5e7;*/
border: 2px solid #ffffff;
border-top: 0;
display: none;
padding: 0;
position: absolute;
left: -2px;
z-index: 1000;
box-shadow: 0 0 8px rgba(0,0,0,.3);
top: 100%;
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
color: #3c3c3c;
margin: 0;
width: 200px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
/*background-color: #db572f;*/
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
/*background-color: #666;*/
color: #666;
/*font-style: italic;*/
}
/* Arrow underneath */
/*
.nav-menu .current_page_item > a:after,
.nav-menu .current_page_ancestor > a:after,
.nav-menu .current-menu-item > a:after,
.nav-menu .current-menu-ancestor > a:after {
width: 0;
height: 0;
position: absolute;
content:"";
display:block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #666;
left: 50%;
margin-left: -6px;
}
*/
.menu-toggle {
display: none;
}
/* Navbar */
.navbar {
/*background-color: #f7f5e7;*/
/*background-color: #fff;*/
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
.site-header .search-form {
position: absolute;
right: 20px;
}
.site-header .search-field {
background-color: transparent;
/*background-image: url(images/search-icon.png);*/
/*background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;*/
border: none;
cursor: pointer;
/*height: 37px;*/
margin: 0 auto;
/*padding: 0 0 0 34px;*/
position: relative;
/*-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;*/
/*width: 0;*/
width: 120px;
min-height: 45px;
z-index: 1000;
}
.site-header .search-field:focus {
/*background-color: #fff;*/
/*border: 2px solid #c3c0ab;*/
/*border: 1px solid #666666;*/
cursor: text;
outline: 0;
color: #666666;
/*width: 230px;*/
}