The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Changing location of button, Menu Hierarchy Button
violingirl1978
post Apr 1 2015, 12:52 PM
Post #1


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



Hi Everyone,

For my site, http://50.87.227.240/newsite/, how can I change the menu hierarchy button in word press so it isn't over the word, "lessons," when I put the newsite URL into mobiletest.me? Please let me know every step I should take to fix this as I'm a rookie. Thank you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 1 2015, 05:08 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Yep, it's me again. biggrin.gif
Change the top: 163px; you have set currently on #access .nav-show, #access a.nav-show:hover (line 2803 of style.css) to something else, probably lower than 20px.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 1 2015, 09:32 PM
Post #3


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(Frederiek @ Apr 1 2015, 05:08 PM) *

Yep, it's me again. biggrin.gif
Change the top: 163px; you have set currently on #access .nav-show, #access a.nav-show:hover (line 2803 of style.css) to something else, probably lower than 20px.

Hi,

Good to hear from you. Thank you for all your help. I'll try your idea out smile.gif

Could you give me feedback on the colors of my website now? What would you change colorwise? I tried to go a light brown to complement the color of the violin but there wasn't an option for that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 01:44 AM
Post #4


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(Frederiek @ Apr 1 2015, 05:08 PM) *

Yep, it's me again. biggrin.gif
Change the top: 163px; you have set currently on #access .nav-show, #access a.nav-show:hover (line 2803 of style.css) to something else, probably lower than 20px.


Hi, I changed the px size to 18,14,4, 0 and a negative number but I still couldn't change the location of the menu hierarchy. What do you suggest I do next?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 03:42 AM
Post #5


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(violingirl1978 @ Apr 2 2015, 01:44 AM) *

QUOTE(Frederiek @ Apr 1 2015, 05:08 PM) *

Yep, it's me again. biggrin.gif
Change the top: 163px; you have set currently on #access .nav-show, #access a.nav-show:hover (line 2803 of style.css) to something else, probably lower than 20px.


Hi, I changed the px size to 18,14,4, 0 and a negative number but I still couldn't change the location of the menu hierarchy. What do you suggest I do next?


Also, how can I get rid of the writing below Like "Marnie" on facebook and before "About the Instructor" and "About the Suzuki Method?" I have no idea how that got there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 2 2015, 05:11 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I probably overreacted earlier. Sorry about that. But I was so surprised by the changes. It should be easy to make changes, even in WP. You do have access to the style.css file, don't you?

Here are some resources I found while searching for "how to change css in wordpress":
https://en.support.wordpress.com/custom-design/editing-css/
https://wordpress.org/support/topic/how-to-...css-style-sheet
https://codex.wordpress.org/CSS

The last resource might also be useful to get a better understanding of how things work in WP.

Anyway, it's the top positioning of the hierarchy button that needs to be changed in the CSS, like I said. Maybe, with the help of the links I posted, you can now find the line to be changed.

Now I understand why the texts at the top, including the navigation, are so big. It's because #site-title has a font-size of 32px. That means that everything inside that div inherit that same font-size.

But, if I comment out the font-size, weird things happen. I get an extra link for About the Instructor, and when I shrink the browser window, I get a SELECT list containing a generic Navigate option and that about link. It has a class called responsiveMenuSelect.

I think this is what you mean in your last reply. I have no idea how it got there. Maybe it has something to do with the responsive menu. I had never seen a SELECT list before on your site. Is that some plugin or widget? Is there any documentation for that?

As for the colors, I'd change the background colors back to what they were before, which was nice:
#wrapper: #f8f8f8, .entry: #ffffff.

As for other color changes, do you have a color picker to sample a color you like in e.g. the violin image? That might be a system wide color picker on your computer, or the one inside a graphic editor. In the last case, you'll probably have to open the image in the editor first.

But lets talk about one thing at the time.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 02:00 PM
Post #7


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(Frederiek @ Apr 2 2015, 05:11 AM) *

I probably overreacted earlier. Sorry about that. But I was so surprised by the changes. It should be easy to make changes, even in WP. You do have access to the style.css file, don't you?

Here are some resources I found while searching for "how to change css in wordpress":
https://en.support.wordpress.com/custom-design/editing-css/
https://wordpress.org/support/topic/how-to-...css-style-sheet
https://codex.wordpress.org/CSS

The last resource might also be useful to get a better understanding of how things work in WP.

Anyway, it's the top positioning of the hierarchy button that needs to be changed in the CSS, like I said. Maybe, with the help of the links I posted, you can now find the line to be changed.

Now I understand why the texts at the top, including the navigation, are so big. It's because #site-title has a font-size of 32px. That means that everything inside that div inherit that same font-size.

But, if I comment out the font-size, weird things happen. I get an extra link for About the Instructor, and when I shrink the browser window, I get a SELECT list containing a generic Navigate option and that about link. It has a class called responsiveMenuSelect.

I think this is what you mean in your last reply. I have no idea how it got there. Maybe it has something to do with the responsive menu. I had never seen a SELECT list before on your site. Is that some plugin or widget? Is there any documentation for that?

As for the colors, I'd change the background colors back to what they were before, which was nice:
#wrapper: #f8f8f8, .entry: #ffffff.

As for other color changes, do you have a color picker to sample a color you like in e.g. the violin image? That might be a system wide color picker on your computer, or the one inside a graphic editor. In the last case, you'll probably have to open the image in the editor first.

But lets talk about one thing at the time.


Hi,

No worries. I'm still baffled by the menu icon placement. This is the hardest thing to figure out. Didn't have much luck fixing it and reading about it. Please advise. I already posted to a word press forum and have yet to hear from anybody on this.

I am hoping the color looks pretty much back to how it was.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 02:57 PM
Post #8


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(violingirl1978 @ Apr 2 2015, 02:00 PM) *

QUOTE(Frederiek @ Apr 2 2015, 05:11 AM) *

I probably overreacted earlier. Sorry about that. But I was so surprised by the changes. It should be easy to make changes, even in WP. You do have access to the style.css file, don't you?

Here are some resources I found while searching for "how to change css in wordpress":
https://en.support.wordpress.com/custom-design/editing-css/
https://wordpress.org/support/topic/how-to-...css-style-sheet
https://codex.wordpress.org/CSS

The last resource might also be useful to get a better understanding of how things work in WP.

Anyway, it's the top positioning of the hierarchy button that needs to be changed in the CSS, like I said. Maybe, with the help of the links I posted, you can now find the line to be changed.

Now I understand why the texts at the top, including the navigation, are so big. It's because #site-title has a font-size of 32px. That means that everything inside that div inherit that same font-size.

But, if I comment out the font-size, weird things happen. I get an extra link for About the Instructor, and when I shrink the browser window, I get a SELECT list containing a generic Navigate option and that about link. It has a class called responsiveMenuSelect.

I think this is what you mean in your last reply. I have no idea how it got there. Maybe it has something to do with the responsive menu. I had never seen a SELECT list before on your site. Is that some plugin or widget? Is there any documentation for that?

As for the colors, I'd change the background colors back to what they were before, which was nice:
#wrapper: #f8f8f8, .entry: #ffffff.

As for other color changes, do you have a color picker to sample a color you like in e.g. the violin image? That might be a system wide color picker on your computer, or the one inside a graphic editor. In the last case, you'll probably have to open the image in the editor first.

But lets talk about one thing at the time.


Hi,

No worries. I'm still baffled by the menu icon placement. This is the hardest thing to figure out. Didn't have much luck fixing it and reading about it. Please advise. I already posted to a word press forum and have yet to hear from anybody on this.

I am hoping the color looks pretty much back to how it was.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 2 2015, 03:41 PM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I asked you if you have access to the style.css file and how, but you haven't answered that.

This is how it looks in my shrunken browser:
Attached Image

And this is what I see as the CSS in my Inspector:
Attached Image

So, if you have access to that CSS file, you should be able to change the top: 163px;.
No?

As for the colors, as you can see in the screenshot, it's not as before. For that, all you have to do is delete the colors you probably added in that custom css file. The original colors are still in the right place of, I believe, the style.css file.

I hope you do agree with me that it looked much better, cleaner, even a little sophisticated, with the colors you had before.
Correct me if you don't.

This post has been edited by Frederiek: Apr 2 2015, 03:47 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 04:22 PM
Post #10


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(Frederiek @ Apr 2 2015, 03:41 PM) *

I asked you if you have access to the style.css file and how, but you haven't answered that.

This is how it looks in my shrunken browser:
Attached Image

And this is what I see as the CSS in my Inspector:
Attached Image

So, if you have access to that CSS file, you should be able to change the top: 163px;.
No?

As for the colors, as you can see in the screenshot, it's not as before. For that, all you have to do is delete the colors you probably added in that custom css file. The original colors are still in the right place of, I believe, the style.css file.

I hope you do agree with me that it looked much better, cleaner, even a little sophisticated, with the colors you had before.
Correct me if you don't.


Hi,

Not sure if this helps but I do have a pinboard theme with word press. I have access to the style.css file by going to appearance, then editor. Sorry I didn't see your question earlier.

I honestly can't remember the colors I had before. I've been doing so many things to get the site up and running that everything is starting to be a blur. I'll look at the screen shot I think you posted as to the colors I had before.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 04:33 PM
Post #11


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(Frederiek @ Apr 2 2015, 03:41 PM) *

I asked you if you have access to the style.css file and how, but you haven't answered that.

This is how it looks in my shrunken browser:
Attached Image

And this is what I see as the CSS in my Inspector:
Attached Image

So, if you have access to that CSS file, you should be able to change the top: 163px;.
No?

As for the colors, as you can see in the screenshot, it's not as before. For that, all you have to do is delete the colors you probably added in that custom css file. The original colors are still in the right place of, I believe, the style.css file.

I hope you do agree with me that it looked much better, cleaner, even a little sophisticated, with the colors you had before.
Correct me if you don't.


Here is what I have in my style.css:

#access .nav-show,
#access a.nav-show:hover {
position: absolute;
top:163px;
right: 14%;
display:block;
width: 40px;
height: 20px !important;
padding: 0;
background: url(images/nav.png) no-repeat;
border: none;
text-indent: -1000px;
overflow: hidden;

Both attachment ids did not show up on my end. How do you suggest changing the menu icon button?

The top right now is 163px per your instructions. Not sure what I'm missing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 04:36 PM
Post #12


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(violingirl1978 @ Apr 2 2015, 04:33 PM) *

QUOTE(Frederiek @ Apr 2 2015, 03:41 PM) *

I asked you if you have access to the style.css file and how, but you haven't answered that.

This is how it looks in my shrunken browser:
Attached Image

And this is what I see as the CSS in my Inspector:
Attached Image

So, if you have access to that CSS file, you should be able to change the top: 163px;.
No?

As for the colors, as you can see in the screenshot, it's not as before. For that, all you have to do is delete the colors you probably added in that custom css file. The original colors are still in the right place of, I believe, the style.css file.

I hope you do agree with me that it looked much better, cleaner, even a little sophisticated, with the colors you had before.
Correct me if you don't.


Here is what I have in my style.css:

#access .nav-show,
#access a.nav-show:hover {
position: absolute;
top:163px;
right: 14%;
display:block;
width: 40px;
height: 20px !important;
padding: 0;
background: url(images/nav.png) no-repeat;
border: none;
text-indent: -1000px;
overflow: hidden;

Both attachment ids did not show up on my end. How do you suggest changing the menu icon button?

The top right now is 163px per your instructions. Not sure what I'm missing.


I put the following in the css part and nothing happened with the menu button: #access .nav-show,
#access a.nav-show:hover {
position: absolute;
top:163px;
right: 14%;
display:block;
width: 40px;
height: 20px !important;
padding: 0;
background: url(images/nav.png) no-repeat;
border: none;
text-indent: -1000px;
overflow: hidden;

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 2 2015, 11:43 PM
Post #13


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(violingirl1978 @ Apr 2 2015, 04:33 PM) *

QUOTE(Frederiek @ Apr 2 2015, 03:41 PM) *

I asked you if you have access to the style.css file and how, but you haven't answered that.

This is how it looks in my shrunken browser:
Attached Image

And this is what I see as the CSS in my Inspector:
Attached Image

So, if you have access to that CSS file, you should be able to change the top: 163px;.
No?

As for the colors, as you can see in the screenshot, it's not as before. For that, all you have to do is delete the colors you probably added in that custom css file. The original colors are still in the right place of, I believe, the style.css file.

I hope you do agree with me that it looked much better, cleaner, even a little sophisticated, with the colors you had before.
Correct me if you don't.


Here is what I have in my style.css:

#access .nav-show,
#access a.nav-show:hover {
position: absolute;
top:163px;
right: 14%;
display:block;
width: 40px;
height: 20px !important;
padding: 0;
background: url(images/nav.png) no-repeat;
border: none;
text-indent: -1000px;
overflow: hidden;

Both attachment ids did not show up on my end. How do you suggest changing the menu icon button?

The top right now is 163px per your instructions. Not sure what I'm missing.


I only changed colors on my page through going to appearance, theme options and design since that was the the easiest way for me to do it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 3 2015, 01:00 AM
Post #14


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



I hate to seem impulsive but I think I need to start over again and pick another theme. My friend told me that the navigation on my new site is not good. However, I liked the pinboard theme on wordpress because of where the facebook button is. The navigation though sucks when one sees it on a desktop. Ugh, so many things to consider! The menu button isn't really an issue with other themes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 3 2015, 03:58 AM
Post #15


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



I have to figure out the code for the css for a better place for the "like" on facebook but aside from that, I like that the title of the website was bolded and the menu hierarchy button doesn't seem to be an issue anymore. I will have to figure out the graphics on this site and center the title again like my old site.

I would like to get rid of the following things and was able to get rid of an extraneous item last night from the pinboard theme last night but the process still baffles me as far as code to put into the css part.

I would like to get rid of the search box: <input type="text" class="field" name="s" value="" id="s" placeholder="Search …"> and the pictures of the Prayer Wheels and mountains:

<img src="http://50.87.227.240/newsite/wp-content/themes/catch-everest/images/slider2.jpg" class="wp-post-image" alt="Nepal Prayer Wheels" title="Nepal Prayer Wheels">


<img title="Mount Everest" alt="Mount Everest" class="wp-post-image" src="http://50.87.227.240/newsite/wp-content/themes/catch-everest/images/thumb-390-2.jpg">

<img title="Mount Kanchengjunga" alt="Mount Kanchengjunga" class="wp-post-image" src="http://50.87.227.240/newsite/wp-content/themes/catch-everest/images/thumb-390-3.jpg">

Another violin teacher in the area is using this theme. She uses good common sense for a lot of things. I looked in the source code of her website and found that she used this theme.

Thanks again for all your help. Really appreciate it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 3 2015, 04:22 AM
Post #16


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



I looked at the theme for Responsive Mobile and that might be better than the Catch Everest theme.

I just need to figure out how to "like" my page on facebook and remove "About the Instructor" at the bottom.

I think the navigation will be much easier with this theme than my old theme, don't you? I still think my site should have more color.

How should I get rid of "About the Instructor" at the bottom of my homepage and to the side?

This post has been edited by violingirl1978: Apr 3 2015, 04:24 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2015, 04:43 AM
Post #17


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Ok, a whole new theme. That was maybe indeed the best thing to do.

Apparently, this theme can easily be customized in the Theme Options of this template, or so they say, see http://catchthemes.com/themes/catch-everest/ .

Then, you should be able to find the search, slider and the 3 columns in the options.
I don't think it's a good idea to just hide page elements, like we did before, as they will still be there in the source.

And the social media icons are already not there on your page, where I see them in the theme.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2015, 04:51 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I'm not familiar with Facebook, or any social media for that matter. I prefer to be social in other ways.

Wait a minute, you already got rid of most of the theme, as it looks different now than 5 minutes ago.
That way, I can't keep up.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
violingirl1978
post Apr 3 2015, 11:35 AM
Post #19


Member
***

Group: Members
Posts: 85
Joined: 20-March 15
Member No.: 22,400



QUOTE(Frederiek @ Apr 3 2015, 04:51 AM) *

I'm not familiar with Facebook, or any social media for that matter. I prefer to be social in other ways.

Wait a minute, you already got rid of most of the theme, as it looks different now than 5 minutes ago.
That way, I can't keep up.


Yeah, doing Responsive Mobile theme is having me make a lot less changes than the Catch Everest theme.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2015, 04:41 PM
Post #20


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Maybe the current theme you use is made easier to modify. That's for the better for someone like you, so new to HTML/CSS. Otherwise, you might have had to learn them. But, knowing how to code, gives you better control in the end. And a new skill. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st February 2019 - 03:35 AM