Styling a Circular Logo within Thesis Header so it overlays the nav menu

23 replies [Last post]

Wed, 2016-01-13 19:40

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Hi all,

I am looking for advice on styling a circular logo that is within my header. I have the logo styled in a widget that is only added to a specific page within the header (that page has it's own template in the skin editor) . The logo is exactly how I want it except I need it to drop down over the menu instead of under it. I have already tried z-indexing the menu and the logo and that renders the menu useless.

Here is what it looks like:
http://prntscr.com/9ppj44

And here is what I need it to look like:
http://prntscr.com/9ppjcb

Here is my widget code:
[Deleted due to active link. See below. ~gt]

It seems simple enough but it's really giving me a run for my money.
I was hoping that this tutorial would work for me but not sure if it will: https://amethystwebsitedesign.com/add-logo-on-top-of-navigation-menu-in-a-genesis-child-theme/

Thank you!

Tags:

Wed, 2016-01-13 19:43

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Sorry about that image.. here

Sorry about that image.. here is the actual code:

<div id="headshot-in-header" 
     style="float: right; 
            margin-bottom:-34px; 
            margin-right:-14px; 
            z-index=100; 
            padding-top: 10px; 
            padding-right: 20px; 
            padding-left 1px;">
  <img width="178" 
       height="178" 
       alt="Roger Howe" 
       src="" 
       class="wp-image-322 size-full">
</div>

//mod edit: Formatting edited for clarity ~gt

Wed, 2016-01-13 22:52

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

z-index requires position

And, the elements must be siblings.

E.g.

<div id="banner">
  <p>...</p> /*I don't know what that text on the left is*/
 
  <ul id="main-menu">
    <li>...</li>
    ...
  </ul>
 
  <img url="">
</div>
===============
#banner {
    position: relative;}
 
#main-menu {
    position: relative;}  /* Not strictly needed, but 
                             some browsers need a 
                             cluebat at times */
 
#banner img {
    position: absolute;
    right: 0;
    top: 0;}

Since you didn't post your markup, this skeleton will have to do. Feel free to ask for clarification.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sat, 2016-01-16 23:14

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Thank you, Gary! I moved the

Thank you, Gary!
I moved the header and nav menu so they are together in the body of my site now and definitely did the trick.
I positioned the menu as relative and then did the headshot in header as absolute. I then z-indexed them and voila! The headshot in header image will be removed in mobile view so I'll need to add some media query in for that ( i.e. don't display in mobile, right?)

Which leads me to another question.
On this same site, I have a full width template where the header, nav menu and footer are all full width with everything else in a 950px container. I have figured out how to center the header and footers. I am struggling to center the nav menu and also center my tagline where I want it.
And of course, all these elements need to be responsive for smaller screen sizes/mobile devices. Right now, my header is perfectly responsive so I don't want to mess with it. The menu is also responsive (I just need it centered in the regular view). The struggle is with the tagline.
I can position it however I want with margins etc... but that renders it unresponsive.

What it currently looks like:
http://prntscr.com/9r0vce

What it needs to look like:
http://prntscr.com/9r0v2i

Here is my CSS code that I have on the site for my tagline currently:

 #tagline_new {
	color: white;
	position: absolute;
	left: 46%;
	line-height: 1em;
	font-style: italic; 
	font-family: Times New Roman,serif;
	font-size: 17px;
	text-align: left;
	margin: auto;
    max-width: 485px;
    height: 150px;

This is the code for my header image (it's where I want it to be)

#thesis_header_image {
	padding-top: 0px;
	margin: auto;
}

And finally, my menu code:

.menu {
	position: relative;
	z-index: 2;
	list-style: none;
	border-width: 0 0 1px 1px;
	border-style: solid;
}
.menu li {
	position: relative;
	float: left;
	margin-bottom: -1px;
}
.menu .sub-menu {
	position: absolute;
	left: -1px;
	display: none;
	list-style: none;
	z-index: 110;
	margin-top: -1px;
}
.menu .sub-menu .sub-menu {
	top: 0;
	left: $submenu;
	margin: 0 0 0 -1px;
}
.menu li:hover > .sub-menu {
	display: block;
}
.menu .sub-menu li {
	width: $submenu;
	clear: both;
}
.menu a, .menu_control {
	display: block;
	$menu
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: $text1;
	border-width: 1px 1px 1px 0;
	border-style: solid;
	background-color: $color2;
	padding: 0.75em 1em;
}
.menu a:hover {
	background-color: $color1;
}
.menu_control {
	display: none;
	background-color: $color3;
}
.menu .sub-menu a {
	border-left-width: 1px;
}
.menu, .menu a, .menu .sub-menu {
	border-color: $color1;
}
.menu .current-menu-item > a {
	border-bottom-color: $color3;
	background-color: $color3;
	cursor: text;
}
.menu .sub-menu .current-menu-item > a {
	border-bottom-color: $color1;
}

If you could help me with either of those issues, I would be most grateful! Thank you again for your time.

Sun, 2016-01-17 02:22

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

HTML source?

Can you link the page/s/? Without the html, css coding is gibberish. Set up a dummy user and password if needed (e.g. for other than hot linking). You can delete the username and password once the issue is resolved.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sun, 2016-01-17 23:39

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Hi Gary, I can't give the

Hi Gary,

I can't give the name and password on a public setting and I wasn't the one who set it up for me either. Is there a way to private message you?

Mon, 2016-01-18 23:23

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Hi Gary, I sent you a PM with

Hi Gary, I sent you a PM with the info needed. I hope this helps. I am hoping to finish this project by the 24th so I'm kind of in a time crunch now. Will keep trying to work things out on my mine until I hear from you. Thanks again!

Tue, 2016-01-19 21:36

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Sorry, I missed the PM earlier

I'll take a look later this evening. In the meantime, this

Quote:

The headshot in header image will be removed in mobile view so I'll need to add some media query in for that ( i.e. don't display in mobile, right?)

Sounds right. Shouldn't be any problem.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2016-01-19 22:35

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Okay, I went ahead and added

Okay,
I went ahead and added this bit of code:

@media (max-width: 950px) {
#headshot_in_header {
display: none;
}
}

to my basic page layout only (skin css in thesis editor) as the headshot is only that page and not on the "home page".

However, it doesn't seem to be working because I can shrink my browser and it still shows up way off to the right there.
I'm going to check on a tablet or a phone soon and see what happens.

Thank you for your time.

Fri, 2016-01-22 06:47

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

A fix, I think

See the attached file, Samantha. If I grokked what you're wanting, responsiveness should be taken care of; use the same treatment for the banners on both pages. The navigation should be given more consideration; at smaller sized screens, there is a lot of overlap. Also, phones don't generally support :hover and they need larger 'buttons' to deal with using fingers to click the links. I did not deal with those issues because 1) I'm lazy, and 2) I have no clue what the client would want. That's your headache.

cheers,

gary

//edit: file deleted ~gt

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sun, 2016-01-24 17:17

#10

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Hi Gary, The site is finally

Hi Gary,
The site is finally coming together! I can't open your attachment though... it gives me an error code: http://prntscr.com/9u91i2
Thank you for taking the time to help me though; I really appreciate it.

I just have a few issues left.

1. Placeholder text won't actually show up in the search box itself but instead it is showing underneath the clickable search icon. I'm using a Thesis Widget Search with custom coding. It's probably pretty simple but I'm drawing a blank now.

2. I need to deal with the hover issue. She wants me to have everything open with a click on the mobile menu. This is problematic for sure because when I go to the mobile menu and try to open the submenu of "books", it wants to take me to "books" page instead of just sitting there and letting me choose a submenu category. I don't have a lot of mobile experience... don't even have an iphone. So, I'm trying my best with the developer tool simulator to see what it looks like.

I believe I fixed the header issues for mobile. Everything seems to be shrinking down as it should. There is a header tagline issue on ipad view but I can remedy that easily enough with some mobile query code. I also moved the searh icon so it stays on the far right in mobile view.

The entire header looks great in IE, Safari and Chrome. Firefox has a bigger font view and everything seems magnified. Thus, I have to scroll it down to 90% to get the same view.
Here is the issue:
http://prntscr.com/9u8j62

And this is the Chrome view at 100%:

http://prntscr.com/9u8jdr

Can I fix this with some Moz specific code?

I want to change the margin-right to 22% instead of the standard 28% I have on there right now.

div#thesis-search-widget-2 {
float: right;
margin-right: 28%;
}

I was thinking of doing something like this:

{
-moz-appearance:
margin-right: 22%;
}

Sun, 2016-01-24 18:46

#11

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

File

Hmm. Worked for me, but …

Another try. You'll need to rename the file to 'test.html', once downloaded; the site does not allow uploading html files.

gary

Attachment	Size
test.txt	10.85 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sun, 2016-01-24 22:30

#12

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

It doesn't want to let me

It doesn't want to let me download it; just open it in a new window and that is when I get the error message.

Sun, 2016-01-24 23:51

#13

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Sounds like you're using MSIE

That's a really sh*tty browser for development purposes as it tries to figure out the file type based on the file's content.

Right click on the link and save as test.html in whichever directory your local server uses as its root.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 00:22

#14

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Hey Gary, I'm using Chrome

Hey Gary,

I'm using Chrome and FF. Can't stand IE and barely tolerate Safari. LOL. These are my options on right click: http://prntscr.com/9uf3ve
I tried saving link (while in FF) and it gave me the option to save as text or as all files. I tried both ways and the download failed. It must be an issue on my end but not sure what.

Mon, 2016-01-25 02:23

#15

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

can't even force it to fail in Chrome or FF

I guess there is something at your end causing probs. Try right click and save link as. Use whatever defaults you have. I can't imagine that not working.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 02:46

#16

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Posting code directly to the thread

CSS

    html,
    body {
        background-color: white;
        color: black;
        font: 112.5%/1.67 georgia, serif;
        margin: 0;
        padding: 0;}
 
    p {
        font-size: 1em;}
 
    hr {
	display: none;}
 
    #banner,
    #footer {
	background-color: #990000;}
 
    #footer,
    #copy {
	margin: 0;
	text-align: center;
	font-size: smaller;}
 
    #banner h1 {
	margin: 0;
	width: 100%;
	max-width: 44rem;}
 
    #banner img {
	width:  100%;
	max-width: 569px;}
 
    #tagline {
	color: white;
	font-family: "Times New Roman", serif;
	font-size: smaller;
	font-style: italic;
	line-height: 1.2;
	margin: -5em auto 1em;
	max-width: 28em;
	text-align: justify;}
 
    #top-nav {
	background-color: #bba57d;
	font-size: .78em;
	list-type; none;
	margin: 0;
	padding: 0;
	text-align: center;}
 
    #top-nav ul {
	background-color: #bba57d;
	margin: 0;
	padding: 0;
	text-align: left;}
 
    #top-nav li {
	color: #990000;
	display: inline-block;
	padding: 0 1em;
	position: relative;}
 
    #top-nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;}
 
    #top-nav ul li {
	display: block;}
 
    #top-nav ul li ul {
	top: 0;
	left: 100%;}
 
    #top-nav li:hover > ul {
	display: block;}
 
    #search-form {
	background-color: pink;
	display: inline-block;
	height: 1.2em;
	margin: 0;
	overflow: hidden;
	width: 3em;}
 
    fieldset {
	border:none;}
 
    @media (max-width: 52em){
	#tagline {
	    margin-top: 0;
	    max-width: none;
	    width: 90%;}}

More to follow

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 02:49

#17

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Now, the html

HTML body

  <body id="new-home">
    <div id="banner">
      <h1>
        <a href="/dev1"><img alt="Howe Healthcare"
				height="142"
				src="/dev1/wp-content/uploads/2015/12/Logo_new.jpg"
				title="click to return home"
				width="569"></a>
      </h1>
 
      <p id="tagline">
        I am convinced that wisdom resides in the integration of the
        knowledge and insights of all persons; sharing is necessary to
        integration.
        <br>
        This web site is my platform for sharing.
      </p>
 
      <ul id="top-nav">
        <li>
          <a href="/dev1/">Home</a>
        </li>
 
        <li>
          <a href="/dev1/index.php/about/">About</a>
        </li>
 
        <li>
          <a href="/dev1/index.php/books/">Books</a>
          <ul>
            <li>
              <a href="/dev1/index.php/books/non-fiction/">Non-Fiction</a>
              <ul>
                <li>
                  <a href=
			  "/dev1/index.php/books/non-fiction/where-have-we-failed/">
                    WHERE HAVE WE FAILED?</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/books/non-fiction/healing-healthcare/">HEALING
                    HEALTHCARE</a>
                </li>
              </ul>
            </li>
 
            <li>
              <a href=
		      "/dev1/index.php/books/fiction-by-julius-del-mar/">Fiction
		by Julius Del Mar</a>
              <ul>
                <li>
                  <a href=
			  "/dev1/index.php/books/fiction-by-julius-del-mar/the-fiji-queen/">
                    The Fiji Queen</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/books/fiction-by-julius-del-mar/for-the-sake-of-the-music/">
                    For the Sake of the Music</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/books/fiction-by-julius-del-mar/the-misplaced-pillow/">
                    The Misplaced Pillow</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>

more ...

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 02:53

#18

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

... more

        <li>
          <a href="/dev1/index.php/other-writing/">Other Writing</a>
          <ul>
            <li>
              <a href=
		      "/dev1/index.php/category/editorials/">Editorials</a>
              <ul>
                <li>
                  <a href=
			  "/dev1/index.php/category/editorials/category-a/">Category
                    A</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/category/editorials/category-b/">Category
                    B</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/category/editorials/category-c/">Category
                    C</a>
                </li>
              </ul>
            </li>
 
            <li>
              <a href="/dev1/index.php/category/essays/">Essays</a>
              <ul>
                <li>
                  <a href=
			  "/dev1/index.php/category/essays/healthcare-issues/">Healthcare
                    Issues</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/category/essays/philosophical-musings/">
                    Philosophical Musings</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/category/essays/malesh-the-healer/">Malesh
                    the Healer</a>
                </li>
 
                <li>
                  <a href=
			  "/dev1/index.php/category/essays/other-essays/">Other
                    Essays</a>
                </li>
              </ul>
            </li>
 
            <li>
              <a href="/dev1/index.php/category/sermons/">Sermons</a>
            </li>
          </ul>
        </li>

more...

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 02:57

#19

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

... more

        <li>
          <a href="/dev1/index.php/consulting/">Consulting</a>
        </li>
 
        <li>
          <a href="/dev1/index.php/category/news-updates/">News &amp;
            Updates</a>
        </li>
 
        <li>
          <a href="/dev1/index.php/contact/">Contact</a>
        </li>

more ...

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 02:59

#20

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

... still more

        <li>
          <form action="/dev1"
                  id="search-form"
                  method="get">
            <fieldset>
              <label for="s">Search</label> 
              <!-- filling the value attribute does not replace label -->
              <input id="s"
                      name="s"
                      onblur=
                      "if (this.value == '') {this.value = 'Search';}"
                      onfocus=
                      "if (this.value == 'Search') {this.value = '';}"
                      type="text"
                      value="Search"> <input id="searchsubmit"
					      type="hidden"
					      value="">
            </fieldset>
          </form>
        </li>
      </ul>

more ...

Phew, this is getting old, breaking the code into segments.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 03:02

#21

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Getting to the end

    <hr>
 
    <div id="footer">
      <form action=
	      "http://howehealth.us12.list-manage1.com/subscribe/post"
              id="signup"
              method="post">
        <fieldset>
          <p class="email_form_intro">
            Sign up for the Howe Healthcare mailing list to receive
            occasional updates about new work!!!!!
          </p>
          <label for="email-addy">Email
	    <input class="thesis_email_form_email input_text"
                    id="email-addy"
                    name="MERGE0"
                    type="text"
                    value="">
 
	  </label>
 
	  <input name="submit"
		  type="submit"
		  value="Sign Up!">
 
	  <input name="u"
		  type="hidden"
                  value="57a01ecb5ed427d29a12bc856">
 
	  <input name="id"
		  type="hidden"
                  value="fd38363fa6">
        </fieldset>
      </form>
    </div>

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 03:03

#22

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Last one

    <hr>
 
    <p id="copy">
      © Roger Howe. All Rights Reserved.
    </p>
  </body>

(Post lengths are limited, so easy to overrun with code)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2016-01-25 05:07

#23

visionarydesigns

Offline

newbie

Nor-Cal

Last seen: 7 years 19 weeks ago

Nor-Cal

Timezone: GMT-8

Joined: 2016-01-13

Posts: 10

Points: 11

Thank you, Gary, for doing

Thank you, Gary, for doing all this code for me. I put it into a "Codepen" so I could see what it looks like roughly.
I can definitely use a lot of what you gave me to better the site. The Thesis forum guys told me that I need to clean up my media queries and also the menu before they can pinpoint the problem with the Thesis Search box... so I'm working on cleaning up and then I'll implement some of the code you gave me.

Thank you again, so much!

Styling a Circular Logo within Thesis Header so it overlays the nav menu

Sorry about that image.. here

z-index requires position

Thank you, Gary! I moved the

HTML source?

Hi Gary, I can't give the

Hi Gary, I sent you a PM with

Sorry, I missed the PM earlier

Okay, I went ahead and added

A fix, I think

Hi Gary, The site is finally

File

It doesn't want to let me

Sounds like you're using MSIE

Hey Gary, I'm using Chrome

can't even force it to fail in Chrome or FF

Posting code directly to the thread

Now, the html

... more

... more

... still more

Getting to the end

Last one

Thank you, Gary, for doing

User login

Navigation