톱 메뉴 CSS - 맞춤 및 연결 문제가 있습니다

Question

연락처 정보와 소셜 미디어 아이콘이 나열된 메뉴 위에이 웹 사이트의 상단 표시 줄을 만들려고합니다 (기본 메뉴 탐색에서 가져옵니다) https://grownowsma.com/

내가 가지고있는 세 가지 문제 :

1) 보조 상단 막대의 전체 내용을 오른쪽 정렬 할 수 없습니다. 나는 그들을 "접촉"영역 위에 놓기를 원합니다. -이 기사에서는 align : right 및 align-contents를 사용하여 다양한 CSS 선택기를 시도했습니다. 성공 없음

2) 이메일과 전화 번호가 세로로 정렬되어 아이콘이 더 잘 보이기를 바랍니다. 나는 vertical-align : center와 함께 다양한 선택자를 시도했다. 나는 VA가 인라인으로 만 작동한다는 것을 읽었지 만, 이것은 인라인이므로 난처한 상황입니다.

3) Facebook 아이콘을 클릭하면 열리지 만 다른 사회 아이콘을 클릭하면 열리지 않습니다. 나는 각 사회적인 아이콘을 감싸는 것을 시도했다. 그래서 아마 그들이 도움이 될 것이지만, 어떤 이유로 든 운이 없다. 4 개의 소셜 미디어 아이콘 모두에서 링크가 작동하도록 HTML을 변경하려는 아이디어는 있습니까?

<p style="text-align: right; font-family: 'Muli'; vertical-align: center;"> 
 
    <a href="mailto:josh@grownowsma.com">josh@grownowsma.com</a> | <em><a 
 
     href="tel:(978)%20857-4349" target="_blank" rel="noopener">978-857- 
 
    4349 </a> | </em><span><a href="https://www.facebook.com/Grow-Now-Social- 
 
     Media-Agency-1275074409247860/" target="_blank" rel="noopener"><img 
 
     class="alignnone wp-image-520" src="https://grownowsma.com/wp- 
 
     content/uploads/2017/11/facebook.png" alt="" width="25" height="25" /> </a> 
 
    </span><span><a href="https://twitter.com/grownowsma" target="_blank" 
 
     rel="noopener"><img class="alignnone wp-image-519" 
 
     src="https://grownowsma.com/wp-content/uploads/2017/11/twitter.png" alt="" 
 
     width="25" height="25" /></a></span><span> <a 
 
     href="https://www.instagram.com/grownowsma/" target="_blank" 
 
     rel="noopener"> </a><a href="https://www.instagram.com/grownowsma/" 
 
     target="_blank" rel="noopener"><img class="alignnone wp-image-521" 
 
     src="https://grownowsma.com/wp-content/uploads/2017/11/instagram.png" alt="" 
 
     width="25" height="25" /> </a></span><span><a 
 
     href="https://www.linkedin.com/company/11331850/" target="_blank" 
 
     rel="noopener"><img class="alignnone wp-image-518" 
 
     src="https://grownowsma.com/wp-content/uploads/2017/11/linkedin.png" alt="" 
 
     width="25" height="25" /></a></span> 
 
</p>

Answer 1

당신은 col-lg-0 middlecol-lg-12에이 클래스를 변경해야, 또는 스타일이 CSS .row-menu-inner .col-lg-0.middle{ width: 100%; float: none;}

Answer 2

(참고 :.이 질문은 잘못 작성된되어 나는 그것이 쉽지 않을 것 알지만, 당신은 정말 당신이 뭘하려는 건지 최소한의 예를 포함해야 그것은. 어느 쪽이든 신속하게 살펴본 후, 내가 찾은 것을 쓸 수는 없으므로 여기에 빠른 대답이 있습니다.)

세 가지 문제를 모두 해결해야합니다. 두 가지 변경 사항 만 있습니다. 가로 맞춤 문제는 내비게이션을 col-lg-0 (즉각 자식 인 .row-menu-inner)으로 설정했기 때문에 발생합니다. 이것은 전체 너비 탐색에 대한 올바른 값이 아닙니다. 이것을 col-lg-12으로 변경하십시오. 그러면 다른 오른쪽 정렬 규칙이 적용됩니다. 소셜 아이콘을 세로로 맞추려면 img.alignnone 규칙에 vertical-align: middle을 추가하면됩니다.