Wordpress, child theme and Dreamweaver

[theshoefairy]

Hi all.

I have hit a brick wall.

Thanks to Paul Murray I have managed to work out how to import/export wordpress sites between my two accounts.

I have my website set up in DW. I have created a child theme of the mystyle theme and am currently working on that, or at least trying to.

I have installed mega menu in WP to customise my navigation menu. The problem I have is that the nav menu is in the top right hand corner, and I want to move it either to the side of my logo or just underneath. I can't se any setting in WP that lets me do this. And when I try to do it in DW, I can't as the style.css file is empty under the child theme. I do have a functions.php file under child theme. I have copied and pasted the header and footer files into the child theme in DW.

Does anyone know how I could move this? There are also grey horizontal lines under my logo which were part of the theme and I also want to remove these.

I have attached a screenshot of the home page so you can see what I mean.

Many thanks

 

[Paul Murray]

You put CSS styles in the child theme CSS and they override the parent. You're using what I assume is Google Chrome as the browser. If you right click the nav and choose 'inspect' at the bottom, here you can view the DOM of your site/page, and the corresponding CSS styles on the right. Hover your mouse over the DOM list until you find your navigation is highlighted, click on it and view the CSS on the right.

There's a couple of ways the navigation might be positioned to the right, but either way will require further CSS tweaks. Without access to the page it's hard to know, but it most likely be either

text-align:right;

or

float:right;

. You can try swapping the right value for left, but this will probably cause more issues if it's a floated element.

What's the name of the parent theme? I'll try and have a look at the mark-up myself.

 

[theshoefairy]

Thanks a lot. I think the problem is that if I was editing the style.css file from the parent theme I'd be ok because I could tweak it using various tutorials and be able to change the little bits that I want. Now that the style sheet in the childthem is blank. I don't actually know the code to override certain things from the parent theme if that make sense? The parent theme is https://woocommerce.com/products/mystile. The child theme style sheet in dreamweaver just says this:
/*
Theme Name: mystlye-child
Description: Child theme for my style theme
Author: theshoefairy
Template: mystile

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

 

[Paul Murray]

You paste the values you want to override in the child theme. Don't touch the parent theme at all as any changes you make will be overwritten when they release an update.

The code you need to add to your child CSS is this;

@media only screen and (min-width: 768px)
   {
      #header #navigation {
         float:left;
   }
}

This will move the nav to the left and will basically sit it beside the logo.

If you're unfamiliar with CSS then you may be biting off quite a bit more than you can chew. Changing layout styles, sizes, positionings, etc can have a knock-on effect with other elements on the page, and you could outright break the layout at mobile sizes (especially navigation).

I don't mean to put you off but if you don't really know what you're doing you may struggle to fix or revert any issues you cause.

 

[theshoefairy]

Thanks for your help. I am going to try to learn as best as I can. I think there is something wrong with the stylesheet possibly as I entered that code and it hasn't moved.

 

[Paul Murray]

Updated it. I forgot to add in the curly braces to open and close the media query.

 

[theshoefairy]

Sorry for being thick, but what does the @media only bit mean?

 

[Paul Murray]

It's a media query, it tells the CSS to do something differently at different screen sizes or on certain devices. Here it basically says do this only if the screen width is larger than 768px. Below 768px it will switch to the CSS rules that give a mobile layout. The float:left; rule is overriding the value defined in the in the parent CSS (float:right. There are a lot more values in there. You can open it up in a text editor and have a look through.

 

[theshoefairy]

Thanks for your help If I open it in DW, how did you navigate to that particular bit where the menu is?

 

[Paul Murray]

I viewed it through Google Chrome like I mentioned earlier. The CSS values for the navigation is around line 589.

 

[theshoefairy]

I think the best thing to do for me is to pick a theme and just use it as it is for now with a bit of customiation through WP and then take a css course online possibly. I want a shop on my site too and with all this messing about I haven't even got the hompage lookng as I want it yet :/

 

[almamartone]

If any one wanna learn Web Designing or Development with WordPress and Dreamweaver Theme integration. Go to lynda.com and look for Joseph Lowery

 

[staunton_rook]

avoid wordpress!! learn to code

 

[wac]

avoid wordpress!! learn to code

Yes, learn to code, but don't avoid WordPress. It would be like a plumber trying to avoid boilers. If anything, avoid other people's themes with bloated customizer UA and drag and drop BS.