Newbie Help - Move Sidebar links up

resolved (48 posts) (3 voices)

  1. mac1083
    Member

    Hi. My goal is to move my sidebar links up a few pixels through CSS code.

    History: I installed my custom logo on missionmedschool.com and adjusted the width of the sidebar to make it look nice. This is the CSS I used to do this:

    #header { width: 300px !important; }
    #content_wrap { margin-left: 300px !important; }
    #header_inner { width: 240px !important; }
    #primary_menu { width: 240px !important; }
    .logo { position: absolute; left: -30px; }

    Then the problem was that the logo was now layered behind the sidebar links. I played around with the CSS to fix this. I changed "absolute" to "relative" which worked, but I don't really understand what I did to make it work:

    #header { width: 300px !important; }
    #content_wrap { margin-left: 300px !important; }
    #header_inner { width: 240px !important; }
    #primary_menu { width: 240px !important; }
    .logo { position: relative; left: -30px; }

    Current Issue: Now the sidebar links are too far below the logo and the sidebar refuses to scroll down, so the bottom sidebar links are not accessible. I want to move the side bar links up and make the sidebar scrollable so all the links can be seen, even on a mobile device. So I tried this, but it made no difference:

    #header { width: 300px !important; }
    #content_wrap { margin-left: 300px !important; }
    #header_inner { width: 240px !important; }
    #primary_menu { width: 240px !important; }
    .logo { position: relative; top: -20px; left: -30px; }

    What should I do? Thanks!

    Posted 4 years ago #
  2. Elliott
    Support

    Hello mac1083,

    Send us a link to the exact page.

    Posted 4 years ago #
  3. mac1083
    Member

    Hi. It's missionmedschool.com. This issue is happening on every page of the site, not just an isolated page. The CSS box I inserted the code into is on the "general" tab. Does that help? Thank you.

    Posted 4 years ago #
  4. Elliott
    Support

    You must be referring to the header which displays on the left hand side and holds your logo and menu as I couldn't find a sidebar anywhere in your site.

    Go ahead and take a screenshot and highlight what your trying to do.

    Posted 4 years ago #
  5. mac1083
    Member

    Hey,

    Sorry, exam weeks a bitch and a half. Ok, so here's the screen shot. I was wrong and confused about what a "sidebar" was. To rephrase my question:

    The black vertical header on the left side of missionmedschool.com contains an ascending list of white text page links to navigate the site. The problem is that when I used CSS to resize the header to fit the logo at the top, it showed the page links in front of the logo, so I changed the CSS code from "absolute" to "relative", which worked to move the page links down below the logo, but now they are too low and won't scroll when the bottom page links get cut off by the bottom edge of the browser.

    Referring to the attached snapshot, I want to move the page titles in the header from arrow "1" up to around arrow "2". Arrow "3" points out that the page titles get cut off by the bottom of the browser and are therefore unviewable and useless. If I move the page links up a bit, it will solve the problem on a computer screen, but assuming someone views the site on an a mobile device, this would bring the problem back. Is there a way to make the page links in the vertical header scrollable so the bottom links can still be accessed if they get cut off in a smaller browser?

    Does that make sense? Thanks.

    -Mike

    Attachments

    1. help!.png (82.1 KB, 4 downloads) 4 years old
    Posted 4 years ago #
  6. Elliott
    Support

    Add this to your custom CSS,

    #primary_menu { top: -60px !important; }

    Posted 4 years ago #
  7. mac1083
    Member

    Fantastic! Thank you. Do you know of anyway to make it scrollable (or maybe the term is "responsive") incase it's viewed in a smaller browser?

    Posted 4 years ago #
  8. mac1083
    Member

    Also on the homepage, is there a way to place the call to action banner at the top of the page above the slideshow banner? I've looked and looked in the "custom homepage text" box on the Myriad "homepage" tab because I figured I could just cut and paste the slideshow code above the call to action code, but I don't see the code for the slide show anywhere.

    I would also like to have a "recent blog entries" window on the home page which shows like a snapshot of the 3 most recent blogs from the blog page, but to where it automatically updates when I create a new blog post.

    Thank you!

    Posted 4 years ago #
  9. Elliott
    Support

    If your using the latest version of the theme then the menu will turn responsive automatically (as long as your not disabling the responsive settings in Dashboard -> your theme -> Responsive & Mobile).

    You can use our blog shortcodes, http://mysitemyway.com/docs/index.php/Blog_Shortcode, to display the latest posts on the homepage.

    Posted 4 years ago #
  10. mac1083
    Member

    That makes sense. I logged in with my iPhone and I see what you mean, it changes the whole layout which is nice. What I mean though is if I log onto my site with a small screened laptop, like and Acer or something, the last 3-5 page links are cut off due to the smaller screen/browser size. I need to fix this so the page links are accessible to all screen sizes. Is there a way to do this (i.e. make the page links scrollable so that if they are cut off by the bottom edge of the browser, the user can still access them)? Thank you.

    Also, is there a way to place the "call to action" banner above the slider on the homepage?

    I'm still well within my 30 day refund period. Any first year high school kid could download these themes as a torrent for free, the reason I paid $150 for them is for the one on one support, that's it. So thank you for your help and speedy responses. You guys really are knowledgable. I know I have a lot a basic questions, but I'm learning a lot, which again is why I signed up.

    Posted 4 years ago #
  11. Elliott
    Support

    Open up /wp-content/themes/[your_theme]/framework.php and around lines 161 - 162 you should see this,

    add_action( 'mysite_after_header', 'mysite_slider_module' );
    add_action( 'mysite_after_header', 'mysite_teaser' );

    Flip those lines upside down to move the intro above the slider.

    I'm not sure about the menu. Would you like to try reducing the font size to make more room?

    Posted 4 years ago #
  12. mac1083
    Member

    Sorry about that. I was reading through forums too and accidentally posted:

    Awesome thank you. Sure, that could work. Or maybe increase the font side, and decrease the line spacing between the links? Can you give me the codes for both options (1. decrease font size, 2. increase font size - change line spacing between links)? And I'll play around with them. Thank you

    Posted 4 years ago #
  13. Elliott
    Support

    Try this,

    .jqueryslidemenu li {
        line-height: 12px !important;
    }
    .jqueryslidemenu li a {
        font-size: 11px !important;
    }
    Posted 4 years ago #
  14. mac1083
    Member

    Cool. Thank you.

    Posted 4 years ago #
  15. mac1083
    Member

    Hi, I'm trying to change the order of the page links in the left vertical header. I changed the numbers on each page under page "Order" and applied the changes but that didn't work. So I downloaded a plugin to do it, and that didn't work either. I'm guess one of the theme settings is overriding the page order? What should I do? Thanks

    Posted 4 years ago #
  16. Elliott
    Support

    Use the Wordpress menus, http://mysitemyway.com/docs/index.php?title=Using_Wordpress_Menus.

    Posted 4 years ago #
  17. mac1083
    Member

    Thank You

    Posted 4 years ago #
  18. mac1083
    Member

    Hi, I'm back again and need some more help :-/ But at least I have screen shots this time. If you remember the issue I was having with my navigation links in the left side header of my myriad theme (at my site missionmedschool.com) getting cut off due to smaller screen saved laptops, I'm still having that problem. I have found a solution but I don't know how to make it happen. Please visit missionmedschool.com to see how the navigation links are currently set up and then look at the attached screens shot that I want it to look like (Either one would be fine). I'm hoping there is a way to make this happen. Thank you.

    Attachments

    1. Menu-Align-2.jpg (50.6 KB, 0 downloads) 4 years old
    2. Menu-Align1.jpg (50.6 KB, 1 downloads) 4 years old
    Posted 4 years ago #
  19. Elliott
    Support

    Try adding this to your custom CSS,

    .jqueryslidemenu > ul > li:nth-child(2n) {
        float: left !important;
    }
    Posted 4 years ago #
  20. mac1083
    Member

    A step in the right direction. This was the result of the code you sent (see attached pic). The only 2 things: the text on the left is one row lower than the text on the right (probably something to do with the home button not being a page?) and all of the links on left except for the last one (downloads) had no action on roll-over or click (no hyperlinking).

    Attachments

    1. Screen-Shot-2013-04-13-at-9.46.41-PM.jpg (60.1 KB, 0 downloads) 4 years old
    Posted 4 years ago #
  21. Elliott
    Support

    I don't see an easy way of doing that. Have you considered using sub menus?

    Posted 4 years ago #
  22. mac1083
    Member

    The links listed all already are going to have sub menus. I'm also using the sidebars for in page navigation as well. Hm, your css worked well, it's just that there were dead links, and the left column was 1 row down. Any chance we could just modify your original CSS code and tweak it to work? I found this article about the topic, but it's above my skill level at this point, so I don't understand it: http://petermichael.me/2010/12/multiple-column-lists-navigation-using-wp_nav_menu/

    Posted 4 years ago #
  23. Elliott
    Support

    If your using sub menus then there should be a + icon beside the top level links which you can click on to view the sub menus.

    You can see how it works on our demo, http://themes.mysitemyway.com/myriad.

    Posted 4 years ago #
  24. mac1083
    Member

    Or, what I could do is split the navigation links up and put some of them horizontally across the top of the site. So in that case I would have half as vertical navigation links on the link banner, and the other half horizontally across the top (maybe under or above the slideshow banner?). I went into Appearance>Menu's and selected a menu under the "header links" drop down box but it doesn't do anything. It says the myriad theme supports up to 3 menus, but the header one doesn't seem to do anything like the "footer links" and "Primary Menu" do. What do you thing?

    Posted 4 years ago #
  25. mac1083
    Member

    I haven't set it up with subpages yet, but that is on the list of things to do. I have to create the subpages first.

    Posted 4 years ago #
  26. mac1083
    Member

    Oh, also is there a way to increase the width of the central page? Some of the pages are too thin with a side bar on them because we increased the width of the logo header on the left, which ate up some of the page room, so the text is smooshed into a thin column now.

    Posted 4 years ago #
  27. mac1083
    Member

    Thanks for all of your help. Sorry I'm such a noob

    Posted 4 years ago #
  28. mac1083
    Member

    Hey man. Bit of a problem. So everything was great and I took your advice and just made subpages, which was working fine. I made so many pages though that appearance>menus gave me an error and deleted my menu. The error read: "The given object ID is not that of a menu item".

    So I googled it and a lot of people had this problem due to an excessive number of pages (40+). I had like 65+ pages at that point, most of which were subpages. The forums I read were saying it's a theme issue or php memory limit:

    -So I checked my php memory and I'm only using 13%.
    -I deactivated all plugins and tried again to no avail.
    -I had backed up to dropbox earlier yesterday, but am having issues now with restoring.
    -I switched the theme to another one and then back again, which not only did not work, it crashed my entire site.

    At this point my site is crashed and the URL MissionMedSchool.com is unresponsive. It wouldn't be the end of the world if I have to rebuild, because the site was new and under construction with little media uploaded. But I would prefer not to have to do that. If I do rebuild and this happens again, that would be the proverbial end of the world.

    Is this a known issue? What should I do? Here's the main forum I was looking at: http://www.fastsecurecontactform.com/php-memory-limit

    I also read that my SQL database might be damaged and my dashboard has an error: "ERROR: The themes directory is either empty or doesn’t exist. Please check your installation."

    Also the plugins page shows an error: "The plugin wp-memory-usage/wp-memory-usage.php has been deactivated due to an error: Plugin file does not exist."

    I reinstalled this plugin to get the following info for you about my Php usage:

    PHP Version : 5.2.17 / 64Bit OS
    Memory limit : 192 MByte
    Memory usage : 25.28 MByte

    I think my theme is deleted, but all the CSS you gave me, and my logo url's and all that stuff under the myriad tab are still there, which is good news I suppose.

    Thank you.

    Posted 4 years ago #
  29. Elliott
    Support

    Make sure Wordpress is updated, all plugins are deactivated and then try again with the menus. You should be able to use as many as you need (just look at our demo sites for example).

    As for reloading the theme contact your hosting provider and ask them if they do automatic backups and then if they do ask them for instructions on reloading the most recent one.

    Posted 4 years ago #
  30. mac1083
    Member

    Ok. Will do over the weekend. Thanks again man.

    Posted 4 years ago #
  31. mac1083
    Member

    So for posterity, I thought I'd let you know how I fixed it. Followed a lot of suggestions (including yours) to no avail unfortunately. The themes folder was missing. So I downloaded Wordpress.zip, unzipped and took the "themes" folder from there and uploaded through my FTP. Once that was done, I reinstalled and activated the theme again. Then restored from dropbox. Luckily all my stuff was saved. I had to rebuild the menu from scratch, which wasn't that bad and a few extra generic pages "find us", "contact me" were created, etc. No big deal.

    Problem solved. Thanks for your help.

    Posted 4 years ago #
  32. I'm glad it's resolved, and thanks a lot for sharing how you've solved this!

    Let us know if you need anything else.

    -roch

    Posted 4 years ago #
  33. mac1083
    Member

    Hey Elliot. Youtube vids won't embed on my site.

    I've tried everything. Posted just the link on it's own line, tried embed tags, etc, in both text and visual editor. Tried to disable all plugins and even deleted all CSS and still nothing. It creates a blank space on the page where the youtube vid should be embedded but no vid, no nothing. I thought maybe the link was getting auto-wrapped in tags in the html text view but that doesn't seem to be the problem either. I even tried to create a new blank page with just the youtube link, to no avail.

    Here's the page I'm having issues with. You can see the space on the page with no video: http://www.missionmedschool.com/about-belize/

    Thanks.

    Posted 4 years ago #
  34. Just visited your page and it's working fine here.

    -roch

    Posted 4 years ago #
  35. mac1083
    Member

    Cool Thanks. By the way. I graduated from RIT. How's the weather in Rochester? :) I'm in Belize these days (med school).

    Posted 4 years ago #
  36. mac1083
    Member

    FYI, I'm using Safari and my extension "Google Disconnect" (Tracking Blocker) was disabling me from viewing the youtube embeds. I turned it off and all is well. Thanks

    Posted 4 years ago #
  37. Hi!

    I'm glad it's resolved then! BTW, despite of my name I'm from Brazil :) But I'm aware that there are a few cities named after me (just kidding!)

    -roch

    Posted 4 years ago #
  38. mac1083
    Member

    Haha, that's funny actually. I'm in Belize and when I told my family in Rochester I would be going to med school here they all wanted to come visit thinking I said Brazil. When I said, no it's Belize, it's in Central American they all said "Oh, never mind" haha

    Posted 4 years ago #
  39. mac1083
    Member

    Hey guys. I want to move the sidebar on my page over further to the right so it doesn't smash the content text together.

    The first attached pic is the page without a sidebar, you can see the tabs in the content area look good and are not smashed together.

    The second attached pic is one I photoshoped. That's how I want it to look when I enable a side bar.

    Attachments

    1. desired.jpg (45.9 KB, 0 downloads) 4 years old
    2. Screen-Shot-2013-05-27-at-4.39.10-PM.jpg (41.8 KB, 0 downloads) 4 years old
    Posted 4 years ago #
  40. mac1083
    Member

    But these next 2 pics show what actually happens when I enable the sidebar. You can see it smashed the tabs because there isn't enough room for both the sidebar and the content. I widened the black header with the logo a while back because I needed more room for the header. I'm guessing this is why there's no enough room with the sidebar now.

    What should I do? I'm hoping these a quick CSS fix. Thanks.

    Attachments

    1. Screen-Shot-2013-05-27-at-4.40.28-PM.jpg (43.4 KB, 0 downloads) 4 years old
    2. Screen-Shot-2013-05-27-at-4.39.49-PM.jpg (42.6 KB, 0 downloads) 4 years old
    Posted 4 years ago #
  41. Elliott
    Support

    Send us a link to that page so we can see it in action.

    Posted 4 years ago #
  42. mac1083
    Member

    Here's the page. I enabled the sidebar so you can see it smashing up the tabs: http://www.missionmedschool.com/about-belize/daily-living/

    It also does the same thing on this page. You can see it smashing the blog post (text and pics): http://www.missionmedschool.com/author/admin/

    I'm not sure if the Archives page would be a separate fix from the others considering it's not exactly a "page" with it's own edit page in dashboard.

    Thanks

    Posted 4 years ago #
  43. Hi!

    I can't see your sidebar there. But probably we can find a CSS fix for this!

    PS: Too bad they don't want to visit you there :) What I've heard is that Belize is quite a safe place compared to other latin america countries, like Brazil, and there are some good historical places to visit

    Posted 4 years ago #
  44. mac1083
    Member

    Sorry, I applied the sidebar. The link should show the smashed up tabs/text now.

    True. A lot of ancient Mayan archeology here. It's dangerous in Belize City and a lot of people take that to mean it's dangerous all over, which it's not. I've always wanted to go to Brazil.

    Posted 4 years ago #

Reply »

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme